@atlaskit/editor-plugin-table 7.7.2 → 7.7.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 7.7.4
+
+### Patch Changes
+
+- [#92426](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92426) [`32c76c7c225c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32c76c7c225c) - Bump adf-schema to 35.9.2 to support table alignment options
+- [#90659](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90659) [`fc633861cff4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fc633861cff4) - [ux] Adds lock button on table's floating toolbar.
+- Updated dependencies
+
+## 7.7.3
+
+### Patch Changes
+
+- [#92977](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92977) [`402557920a06`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/402557920a06) - Use the start position during col resize to update table width
+
 ## 7.7.2
 
 ### Patch Changes

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setTableDisplayMode = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _utils = require("@atlaskit/editor-tables/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var setTableDisplayMode = exports.setTableDisplayMode = function setTableDisplayMode(_ref) {
+  var tr = _ref.tr;
+  var table = (0, _utils.findTable)(tr.selection);
+  if (!table) {
+    return null;
+  }
+  var displayMode = table.node.attrs.displayMode;
+  tr.setNodeMarkup(table.pos, tr.doc.type.schema.nodes.table, _objectSpread(_objectSpread({}, table.node.attrs), {}, {
+    displayMode: !displayMode || displayMode === 'default' ? 'fixed' : 'default'
+  }));
+  return tr.setMeta('scrollIntoView', false);
+};

package/dist/cjs/commands/index.js

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

package/dist/cjs/nodeviews/table.js

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

package/dist/cjs/plugin.js

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

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

@@ -142,7 +142,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         var resizedDelta = clientX - startX;
         tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
         if ((0, _platformFeatureFlags.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/cjs/toolbar.js

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

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

@@ -1,18 +1,56 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tableFloatingCellButtonStyles = exports.tableFloatingCellButtonSelectedStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _consts = require("../consts");
-var _templateObject, _templateObject2;
 var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N20, ")"), "var(--ds-border-radius, 3px)", _consts.contextualMenuTriggerSize + 2, "var(--ds-background-neutral, none)", "var(--ds-space-025, 2px)", "var(--ds-surface, ".concat(_colors.N0, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"), "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))", "var(--ds-space-negative-050, -4px)");
+  return (0, _react.css)({
+    '> div': {
+      // Sits behind button to provide surface-color background
+      background: "var(--ds-surface, ".concat(_colors.N20, ")"),
+      borderRadius: "var(--ds-border-radius, 3px)",
+      display: 'flex',
+      height: "".concat(_consts.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(_colors.N0, ")")),
+      borderRadius: '1px',
+      padding: 0,
+      height: 'calc(100% - 4px)',
+      display: 'flex'
+    },
+    '&& button:hover': {
+      background: "var(--ds-background-neutral-hovered, ".concat(_colors.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'
+    }
+  });
 };
 var tableFloatingCellButtonSelectedStyles = exports.tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), "var(--ds-background-selected, ".concat(_colors.N700, ")"), "var(--ds-background-selected-hovered, ".concat(_colors.N700, ")"), "var(--ds-background-selected-pressed, ".concat(_colors.N700, ")"));
+  return (0, _react.css)({
+    '&& button': {
+      background: "var(--ds-background-selected, ".concat(_colors.N700, ")")
+    },
+    '&& button:hover': {
+      background: "var(--ds-background-selected-hovered, ".concat(_colors.N700, ")")
+    },
+    '&& button:active': {
+      background: "var(--ds-background-selected-pressed, ".concat(_colors.N700, ")")
+    }
+  });
 };

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

@@ -11,14 +11,23 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../../types");
 var _consts = require("../consts");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+  return (0, _react.css)({
+    '&::before': {
+      background: selectedColor
+    }
+  });
 };
-var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
+var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.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`
-var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
 };

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

@@ -11,10 +11,34 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../../types");
 var _consts = require("../consts");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject;
 var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+  return (0, _react.css)({
+    '&::before': {
+      background: selectedColor
+    }
+  });
 };
-var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
-var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
-var toggleStyles = exports.toggleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));
+var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.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
+var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var toggleStyles = exports.toggleStyles = (0, _react.css)({
+  display: 'flex',
+  "input[type='checkbox']": {
+    width: '30px',
+    height: '14px',
+    pointerEvents: 'initial',
+    cursor: 'pointer'
+  },
+  '> label': {
+    margin: '0px',
+    pointerEvents: 'none',
+    '> span': {
+      pointerEvents: 'none'
+    }
+  }
+});

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

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

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

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AddRowBelowIcon", {
     return _AddRowBelowIcon.AddRowBelowIcon;
   }
 });
+Object.defineProperty(exports, "DisplayModeIcon", {
+  enumerable: true,
+  get: function get() {
+    return _DisplayModeIcon.DisplayModeIcon;
+  }
+});
 Object.defineProperty(exports, "DragHandleDisabledIcon", {
   enumerable: true,
   get: function get() {
@@ -66,6 +72,7 @@ Object.defineProperty(exports, "SplitCellIcon", {
 var _DragHandleIcon = require("./DragHandleIcon");
 var _DragInMotionIcon = require("./DragInMotionIcon");
 var _DragHandleDisabledIcon = require("./DragHandleDisabledIcon");
+var _DisplayModeIcon = require("./DisplayModeIcon");
 var _MinimisedHandle = require("./MinimisedHandle");
 var _MergeCellsIcon = require("./MergeCellsIcon");
 var _SplitCellIcon = require("./SplitCellIcon");

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

@@ -14,6 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _types = require("../types");
 var _consts = require("./consts");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
 var InsertLine = function InsertLine(cssString) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
 };

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

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

package/dist/es2019/commands/index.js

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

package/dist/es2019/nodeviews/table.js

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

package/dist/es2019/plugin.js

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

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

@@ -149,7 +149,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         const 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) {
           const mouseUpTime = event.timeStamp;