@atlaskit/editor-plugin-table 15.3.23 → 15.4.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 15.4.1
+
+### Patch Changes
+
+- [`3e9ac3a2226fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e9ac3a2226fd) -
+  Detect 'stuck' state for sticky positioned table header and toggle drop shadow
+
+## 15.4.0
+
+### Minor Changes
+
+- [`8f759171c089b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f759171c089b) -
+  [EDITOR-3322] Make sure that tables are able to handle the new max-width
+
 ## 15.3.23
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -15,6 +15,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -257,7 +258,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
 
       // Ensure minimum width for usability while respecting container constraints
       var width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
-      var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, _consts.TABLE_MAX_WIDTH);
+      var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH);
       return {
         width: width,
         maxResizerWidth: maxResizerWidth

package/dist/cjs/nodeviews/TableResizer.js

@@ -306,8 +306,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
-    var isFullWidthGuidelineActive = closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
-    var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR) : _consts.TABLE_MAX_WIDTH;
+    var isFullWidthGuidelineActive = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? closestSnap && fullWidthGuideline && closestSnap.keys.includes(fullWidthGuideline.key) : closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
+    var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR) : (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
     var shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
     var previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
     (0, _scaleTable.previewScaleTable)(tableRef, {
@@ -335,7 +335,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     var pos = getPos();
     var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
     var tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
-    : _consts.TABLE_MAX_WIDTH;
+    : (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     var tr = state.tr.setMeta(_tableWidth.pluginKey, {
       resizing: false,

package/dist/cjs/nodeviews/TableRowNativeStickyWithFallback.js

@@ -15,6 +15,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
+var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -176,6 +177,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         this.overflowObserver && this.overflowObserver.disconnect();
+        this.stickyStateObserver && this.stickyStateObserver.disconnect();
         this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
         var tree = (0, _dom2.getTree)(this.dom);
         if (tree) {
@@ -306,11 +308,41 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         });
       }, options);
     }
+
+    /**
+     * This observer is used to track the 'stuck' state of the header row.
+     * This roughly mimics `(at)container scroll-state(stuck: top)` in CSS,
+     * but with full browser support.
+     */
+  }, {
+    key: "initStickyStateObserver",
+    value: function initStickyStateObserver() {
+      var _this3 = this;
+      if (!this.editorScrollableElement || !(this.editorScrollableElement instanceof Element)) {
+        return;
+      }
+      var options = {
+        root: this.editorScrollableElement,
+        rootMargin: "-".concat(_styles.tableMarginTop + 16, "px 0px 0px 0px"),
+        threshold: 1
+      };
+      this.stickyStateObserver = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          var _entry$rootBounds;
+          if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top)) {
+            _this3.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
+          } else {
+            _this3.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
+          }
+        });
+      }, options);
+    }
+
     // initialize intersection observer to track if table is within scroll area
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this3 = this;
+      var _this4 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -321,12 +353,15 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         return;
       }
       if (this.isHeaderRow && !this.isInNestedTable) {
+        var _this$stickyStateObse;
         this.initOverflowObserver();
         var closestTable = this.dom.closest('table');
         if (closestTable) {
           var _this$overflowObserve;
           (_this$overflowObserve = this.overflowObserver) === null || _this$overflowObserve === void 0 || _this$overflowObserve.observe(closestTable);
         }
+        this.initStickyStateObserver();
+        (_this$stickyStateObse = this.stickyStateObserver) === null || _this$stickyStateObse === void 0 || _this$stickyStateObse.observe(this.dom);
       }
       this.resizeObserver.observe(this.dom);
       if (this.editorScrollableElement) {
@@ -337,7 +372,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       window.requestAnimationFrame(function () {
         var getTableContainer = function getTableContainer() {
           var _getTree;
-          return (_getTree = (0, _dom2.getTree)(_this3.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+          return (_getTree = (0, _dom2.getTree)(_this4.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
         };
 
         // we expect tree to be defined after animation frame
@@ -363,16 +398,16 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
             return getSentinelTop() !== null && getSentinelBottom() !== null;
           };
           var observeStickySentinels = function observeStickySentinels() {
-            _this3.sentinels.top = getSentinelTop();
-            _this3.sentinels.bottom = getSentinelBottom();
-            [_this3.sentinels.top, _this3.sentinels.bottom].forEach(function (el) {
+            _this4.sentinels.top = getSentinelTop();
+            _this4.sentinels.bottom = getSentinelBottom();
+            [_this4.sentinels.top, _this4.sentinels.bottom].forEach(function (el) {
               // skip if already observed for another row on this table
               if (el && !el.dataset.isObserved) {
                 el.dataset.isObserved = 'true';
 
                 // Ignored via go/ees005
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                _this3.intersectionObserver.observe(el);
+                _this4.intersectionObserver.observe(el);
               }
             });
           };
@@ -387,7 +422,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
             // observe sentinels before they are in the DOM, use MutationObserver
             // to wait for sentinels to be added to the parent Table node DOM
             // then attach the IntersectionObserver
-            _this3.tableContainerObserver = new MutationObserver(function () {
+            _this4.tableContainerObserver = new MutationObserver(function () {
               // Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
               // prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
 
@@ -395,14 +430,14 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
                 tableContainer = getTableContainer();
               }
               if (sentinelsInDom()) {
-                var _this3$tableContainer;
+                var _this4$tableContainer;
                 observeStickySentinels();
-                (_this3$tableContainer = _this3.tableContainerObserver) === null || _this3$tableContainer === void 0 || _this3$tableContainer.disconnect();
+                (_this4$tableContainer = _this4.tableContainerObserver) === null || _this4$tableContainer === void 0 || _this4$tableContainer.disconnect();
               }
             });
             var mutatingNode = tableContainer;
-            if (mutatingNode && _this3.tableContainerObserver) {
-              _this3.tableContainerObserver.observe(mutatingNode, {
+            if (mutatingNode && _this4.tableContainerObserver) {
+              _this4.tableContainerObserver.observe(mutatingNode, {
                 subtree: true,
                 childList: true
               });
@@ -417,32 +452,32 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this4 = this;
+      var _this5 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = (0, _dom2.getTree)(_this4.dom);
+        var tree = (0, _dom2.getTree)(_this5.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this4$editorScrollab;
+          var _this5$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
           // of the sticky header
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          if (entry.target.className === ((_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 ? void 0 : _this4$editorScrollab.className)) {
-            _this4.updateStickyHeaderWidth();
+          if (entry.target.className === ((_this5$editorScrollab = _this5.editorScrollableElement) === null || _this5$editorScrollab === void 0 ? void 0 : _this5$editorScrollab.className)) {
+            _this5.updateStickyHeaderWidth();
           } else {
             var newHeight = entry.contentRect ? entry.contentRect.height :
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
             entry.target.offsetHeight;
-            if (_this4.sentinels.bottom &&
+            if (_this5.sentinels.bottom &&
             // When the table header is sticky, it would be taller by a 1px (border-bottom),
             // So we adding this check to allow a 1px difference.
-            Math.abs(newHeight - (_this4.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
-              _this4.stickyRowHeight = newHeight;
-              _this4.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this5.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
+              _this5.stickyRowHeight = newHeight;
+              _this5.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
               (0, _dom.updateStickyMargins)(table);
             }
           }
@@ -452,13 +487,13 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this5 = this;
+      var _this6 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var _this5$editorScrollab, _this5$editorScrollab2;
+        var _this6$editorScrollab, _this6$editorScrollab2;
         // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
         // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
         // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
-        var rootBounds = (_this5$editorScrollab = _this5.editorScrollableElement) === null || _this5$editorScrollab === void 0 || (_this5$editorScrollab2 = _this5$editorScrollab.getBoundingClientRect) === null || _this5$editorScrollab2 === void 0 ? void 0 : _this5$editorScrollab2.call(_this5$editorScrollab);
+        var rootBounds = (_this6$editorScrollab = _this6.editorScrollableElement) === null || _this6$editorScrollab === void 0 || (_this6$editorScrollab2 = _this6$editorScrollab.getBoundingClientRect) === null || _this6$editorScrollab2 === void 0 ? void 0 : _this6$editorScrollab2.call(_this6$editorScrollab);
         entries.forEach(function (entry) {
           var target = entry.target,
             isIntersecting = entry.isIntersecting,
@@ -466,15 +501,15 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
           // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
           var targetKey = target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
           // Cache the latest sentinel information
-          _this5.sentinelData[targetKey] = {
+          _this6.sentinelData[targetKey] = {
             isIntersecting: isIntersecting,
             boundingClientRect: boundingClientRect,
             rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
           };
           // Keep the other sentinels rootBounds in sync with this latest one
-          _this5.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
+          _this6.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
         });
-        _this5.refreshStickyState();
+        _this6.refreshStickyState();
       }, {
         threshold: 0,
         root: this.editorScrollableElement
@@ -645,12 +680,12 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this6 = this;
+      var _this7 = this;
       if (this.isSticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this6.intersectionObserver) {
-            _this6.intersectionObserver.unobserve(el);
-            _this6.intersectionObserver.observe(el);
+          if (el && _this7.intersectionObserver) {
+            _this7.intersectionObserver.unobserve(el);
+            _this7.intersectionObserver.observe(el);
           }
         });
       }
@@ -659,7 +694,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     key: "makeHeaderRowSticky",
     value: function makeHeaderRowSticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this7 = this;
+        _this8 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2 || this.isInNestedTable) {
         return;
@@ -698,7 +733,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this7.refireIntersectionObservers();
+          _this8.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";

package/dist/cjs/nodeviews/toDOM.js

@@ -119,7 +119,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
-          '--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
+          '--ak-editor-table-max-width': "".concat((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH, "px"),
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),

package/dist/cjs/pm-plugins/commands/insert.js

@@ -163,12 +163,13 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
  * @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
  * (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
  */
-var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
+var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, isMaxWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   return function (state, dispatch) {
     var table = (0, _create.createTableWithWidth)({
       isTableScalingEnabled: isTableScalingEnabled,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
       isFullWidthModeEnabled: isFullWidthModeEnabled,
+      isMaxWidthModeEnabled: isMaxWidthModeEnabled,
       isCommentEditor: isCommentEditor,
       isChromelessEditor: isChromelessEditor,
       isTableResizingEnabled: isTableResizingEnabled
@@ -197,13 +198,14 @@ var createTable = exports.createTable = function createTable(isTableScalingEnabl
  * @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
  * (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
  */
-var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) {
+var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
       var tableNode = (0, _create.createTableWithWidth)({
         isTableScalingEnabled: isTableScalingEnabled,
         isFullWidthModeEnabled: isFullWidthModeEnabled,
+        isMaxWidthModeEnabled: isMaxWidthModeEnabled,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
         isCommentEditor: isCommentEditor,
         isChromelessEditor: isChromelessEditor,
@@ -254,6 +256,8 @@ var insertTableWithNestingSupport = exports.insertTableWithNestingSupport = func
     isTableAlignmentEnabled = _ref2$isTableAlignmen === void 0 ? false : _ref2$isTableAlignmen,
     _ref2$isFullWidthMode = _ref2.isFullWidthModeEnabled,
     isFullWidthModeEnabled = _ref2$isFullWidthMode === void 0 ? false : _ref2$isFullWidthMode,
+    _ref2$isMaxWidthModeE = _ref2.isMaxWidthModeEnabled,
+    isMaxWidthModeEnabled = _ref2$isMaxWidthModeE === void 0 ? false : _ref2$isMaxWidthModeE,
     _ref2$isCommentEditor = _ref2.isCommentEditor,
     isCommentEditor = _ref2$isCommentEditor === void 0 ? false : _ref2$isCommentEditor,
     _ref2$isChromelessEdi = _ref2.isChromelessEditor,
@@ -289,6 +293,7 @@ var insertTableWithNestingSupport = exports.insertTableWithNestingSupport = func
       isTableScalingEnabled: isTableScalingEnabled,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
       isFullWidthModeEnabled: isFullWidthModeEnabled,
+      isMaxWidthModeEnabled: isMaxWidthModeEnabled,
       isCommentEditor: isCommentEditor,
       isChromelessEditor: isChromelessEditor,
       isTableResizingEnabled: isTableResizingEnabled,

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

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_MAX_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
+exports.TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_MAX_WIDTH = exports.TABLE_FULL_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
 var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 48;
-var TABLE_MAX_WIDTH = exports.TABLE_MAX_WIDTH = 1800;
+// Remove TABLE_MAX_WIDTH_OLD when cleaning up editor_tinymce_full_width_mode experiment
+var TABLE_FULL_WIDTH = exports.TABLE_FULL_WIDTH = 1800;
+var TABLE_MAX_WIDTH = exports.TABLE_MAX_WIDTH = 4000;
 var FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 var MAX_SCALING_PERCENT = exports.MAX_SCALING_PERCENT = 0.3;
 var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;

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

@@ -11,6 +11,7 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _colgroup = require("./colgroup");
 var _consts = require("./consts");
@@ -105,7 +106,7 @@ var getTableContainerElementWidth = exports.getTableContainerElementWidth = func
  * @returns The CSS max-width value
  */
 var getTableResizerContainerMaxWidthInCSS = exports.getTableResizerContainerMaxWidthInCSS = function getTableResizerContainerMaxWidthInCSS(isCommentEditor, isChromelessEditor, isTableScalingEnabled) {
-  var maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat(_consts.TABLE_MAX_WIDTH, "px)") : "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ".concat(_consts.TABLE_MAX_WIDTH, "px)");
+  var maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH, "px)") : "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ".concat((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH, "px)");
   return isCommentEditor || isChromelessEditor ? '100%' : maxResizerWidthForNonCommentEditor;
 };
 

package/dist/cjs/pm-plugins/table-width.js

@@ -12,6 +12,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("./table-resizing/utils/consts");
 var _alignment = require("./utils/alignment");
 var _excluded = ["width"];
@@ -22,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Also holds resizing state to hide / show table controls
  */
 var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthPlugin');
-var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   return new _safePlugin.SafePlugin({
     key: pluginKey,
     state: {
@@ -72,7 +73,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
             var layout = node.attrs.layout;
             if (!width && layout) {
               var tableWidthCal;
-              if (fullWidthEnabled) {
+              if (maxWidthEnabled) {
+                tableWidthCal = _editorSharedStyles.akEditorMaxWidthLayoutWidth;
+              } else if (fullWidthEnabled) {
                 tableWidthCal = _editorSharedStyles.akEditorFullWidthLayoutWidth;
               } else {
                 switch (layout) {
@@ -106,8 +109,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
           step.getMap().forEach(function (_, __, newStart, newEnd) {
             newState.doc.nodesBetween(newStart, newEnd, function (node, pos) {
               if (node.type === table) {
-                if (shouldPatchTableWidth && node.attrs.width !== _consts.TABLE_MAX_WIDTH) {
-                  tr.setNodeAttribute(pos, 'width', _consts.TABLE_MAX_WIDTH);
+                if (shouldPatchTableWidth && node.attrs.width !== (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH) {
+                  tr.setNodeAttribute(pos, 'width', (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH);
                 }
                 if (shouldPatchTableAlignment) {
                   tr.setNodeAttribute(pos, 'layout', _alignment.ALIGN_START);

package/dist/cjs/pm-plugins/utils/create.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createTableWithWidth = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("../table-resizing/utils/consts");
 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; }
@@ -16,6 +17,7 @@ var createTableWithWidth = exports.createTableWithWidth = function createTableWi
   var isTableScalingEnabled = _ref.isTableScalingEnabled,
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
+    isMaxWidthModeEnabled = _ref.isMaxWidthModeEnabled,
     isCommentEditor = _ref.isCommentEditor,
     isChromelessEditor = _ref.isChromelessEditor,
     isTableResizingEnabled = _ref.isTableResizingEnabled,
@@ -27,10 +29,14 @@ var createTableWithWidth = exports.createTableWithWidth = function createTableWi
       attrsOverrides.rowsCount = createTableProps !== null && createTableProps !== void 0 && createTableProps.rowsCount ? createTableProps === null || createTableProps === void 0 ? void 0 : createTableProps.rowsCount : NESTED_TABLE_DEFAULT_ROWS;
       attrsOverrides.colsCount = createTableProps !== null && createTableProps !== void 0 && createTableProps.colsCount ? createTableProps === null || createTableProps === void 0 ? void 0 : createTableProps.colsCount : NESTED_TABLE_DEFAULT_COLS;
     }
-    if (isTableScalingEnabled && isFullWidthModeEnabled && !isCommentEditor) {
-      attrsOverrides.tableWidth = _consts.TABLE_MAX_WIDTH;
+    if (isTableScalingEnabled && !isCommentEditor) {
+      if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && isMaxWidthModeEnabled) {
+        attrsOverrides.tableWidth = _consts.TABLE_MAX_WIDTH;
+      } else if (isFullWidthModeEnabled) {
+        attrsOverrides.tableWidth = _consts.TABLE_FULL_WIDTH;
+      }
     }
-    if (isTableAlignmentEnabled && (isFullWidthModeEnabled || isCommentEditor)) {
+    if (isTableAlignmentEnabled && (isFullWidthModeEnabled || (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && isMaxWidthModeEnabled || isCommentEditor)) {
       attrsOverrides.layout = 'align-start';
     }
     if (isCommentEditor && isTableResizingEnabled || isChromelessEditor) {

package/dist/cjs/pm-plugins/utils/snapping.js

@@ -8,6 +8,7 @@ exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.d
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
@@ -19,8 +20,8 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, _editorSharedStyles.akEditorFullWidthLayoutWidth + lengthOffset]);
 };
-var getPadding = function getPadding(editorContainerWith) {
-  return editorContainerWith <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+var getPadding = function getPadding(editorContainerWidth) {
+  return editorContainerWidth <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
   }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
 };
@@ -28,14 +29,18 @@ var getPadding = function getPadding(editorContainerWith) {
 // FF TablePreserve for calculateDefaultSnappings
 var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+  var editorContainerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
   var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var padding = getPadding(editorContainerWith);
-  var dynamicFullWidthLine = editorContainerWith - padding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - padding * 2;
+  var padding = getPadding(editorContainerWidth);
+  var dynamicFullWidthLine = editorContainerWidth - padding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWidth - padding * 2;
+  var dynamicMaxWidthLine = editorContainerWidth - padding * 2 >= _editorSharedStyles.akEditorMaxWidthLayoutWidth ? _editorSharedStyles.akEditorMaxWidthLayoutWidth : editorContainerWidth - padding * 2;
   var guides = [dynamicFullWidthLine - lengthOffset];
+  if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+    guides.push(dynamicMaxWidthLine - lengthOffset);
+  }
   if (!exclude.breakoutPoints) {
     guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
   }

package/dist/cjs/tablePlugin.js

@@ -105,6 +105,8 @@ var tablePlugin = function tablePlugin(_ref) {
       var sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
         wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
+        isMaxWidthModeEnabled: !!(options !== null && options !== void 0 && options.maxWidthEnabled),
+        wasMaxWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasMaxWidthEnabled),
         isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
         isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
         ordering: tablePluginState.ordering,
@@ -150,6 +152,7 @@ var tablePlugin = function tablePlugin(_ref) {
               isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
               isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
               isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
+              isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
               isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
               isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
               isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
@@ -160,6 +163,7 @@ var tablePlugin = function tablePlugin(_ref) {
               isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
               isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
               isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
+              isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
               isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
               isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
               isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
@@ -187,6 +191,7 @@ var tablePlugin = function tablePlugin(_ref) {
           isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
           isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
           isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
+          isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
           isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
           isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
           isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing,
@@ -384,10 +389,10 @@ var tablePlugin = function tablePlugin(_ref) {
       }, {
         name: 'tableWidth',
         plugin: function plugin(_ref13) {
-          var _options$fullWidthEna, _options$isTableScali, _options$tableOptions3, _options$isCommentEdi;
+          var _options$fullWidthEna, _options$maxWidthEnab, _options$isTableScali, _options$tableOptions3, _options$isCommentEdi;
           var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
             dispatch = _ref13.dispatch;
-          return options !== null && options !== void 0 && options.tableOptions.allowTableResizing ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$tableOptions3 = options.tableOptions.allowTableResizing) !== null && _options$tableOptions3 !== void 0 ? _options$tableOptions3 : false, (_options$isCommentEdi = options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
+          return options !== null && options !== void 0 && options.tableOptions.allowTableResizing ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$maxWidthEnab = options.maxWidthEnabled) !== null && _options$maxWidthEnab !== void 0 ? _options$maxWidthEnab : false, (_options$isTableScali = options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$tableOptions3 = options.tableOptions.allowTableResizing) !== null && _options$tableOptions3 !== void 0 ? _options$tableOptions3 : false, (_options$isCommentEdi = options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
       }, {
         name: 'tableWidthInCommentFix',
@@ -539,6 +544,7 @@ var tablePlugin = function tablePlugin(_ref) {
               isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
               isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
               isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+              isMaxWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled,
               isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
               isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
               isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing

package/dist/cjs/types/index.js

@@ -168,6 +168,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   WITH_LAST_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-last-row-insert-line"),
   WITH_LAST_ROW_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-last-row-insert-line__inactive"),
   NATIVE_STICKY: "".concat(_adfSchema.tablePrefixSelector, "-row-native-sticky"),
+  NATIVE_STICKY_ACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-row-native-sticky-active"),
   NO_OVERFLOW: "".concat(_adfSchema.tablePrefixSelector, "-no-overflow")
 });
 var ShadowEvent = exports.ShadowEvent = /*#__PURE__*/function (ShadowEvent) {