@atlaskit/editor-plugin-table 28.1.15 → 29.1.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @atlaskit/editor-plugin-table
 
+## 29.1.0
+
+### Minor Changes
+
+- [`aec3fcfe13ff9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aec3fcfe13ff9) -
+  EDITOR-8303 Add runtime input-latency trigger for limited mode behind
+  platform_editor_dynamic_limited_mode. Limited mode can now latch mid-session when sustained slow
+  input or repeated browser freezes indicate the device is struggling, in addition to the existing
+  document-size decision. The latch is one-way. Nothing is constructed when the experiment is off.
+
+  How much evidence is needed is a single tunable, `requiredConfirmations`: that many qualifying
+  windows, each separated from the last by `confirmationGapMs`. The hardware no longer feeds into
+  the decision — `navigator.hardwareConcurrency` and `navigator.deviceMemory` are reported with the
+  `limitedModeLatched` event instead, so which devices latch can be answered from the data rather
+  than assumed up front.
+
+  `LimitedModePluginState` gains a derived `enabled` flag, which is now the single thing consumers
+  should branch on — the individual reasons (`documentSizeBreachesThreshold`, `latchPolicyBreached`)
+  no longer need to be combined at each call site, so a future reason needs no change outside this
+  plugin. `sharedState.enabled` reads from it.
+
+  Under the experiment the document decision is also evaluated on load and on document replacement
+  only, rather than on every transaction that changes the document. That check walks the whole
+  document, so it was a full-document scan per keystroke on exactly the pages least able to afford
+  one. The trade-off is that a document editing its way past the thresholds is not re-judged until
+  it next loads.
+
+  Consumers updated to react to a mid-session change: table sticky headers now subscribe instead of
+  reading once at construction, block-controls resets rather than freezes its state on entry, and
+  the expand, media and table nodeviews read the derived flag so they no longer miss a runtime
+  latch.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 29.0.0
+
+### Patch Changes
+
+- [`7c7646bee3e68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c7646bee3e68) -
+  Clean up feature gate `platform_editor_table_height_analytics_event`
+- Updated dependencies
+
 ## 28.1.15
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -30,8 +30,8 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing,
     allowFixedColumnWidthOption = _ref.allowFixedColumnWidthOption;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'], function (states) {
-      var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction', 'limitedMode'], function (states) {
+      var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt, _states$limitedModeSt;
       return {
         // tableState
         isTableResizing: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.isTableResizing,
@@ -56,7 +56,10 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
         width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width,
         lineLength: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.lineLength,
         // interactionState
-        interaction: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState
+        interaction: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+        // limitedModeState — selected (rather than read once) so sticky headers stop when limited
+        // mode latches mid-session, not only when it was already on as the table mounted.
+        limitedModeEnabled: (_states$limitedModeSt = states.limitedModeState) === null || _states$limitedModeSt === void 0 ? void 0 : _states$limitedModeSt.enabled
       };
     }),
     isTableResizing = _useSharedPluginState.isTableResizing,
@@ -74,7 +77,8 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     lineLength = _useSharedPluginState.lineLength,
     mode = _useSharedPluginState.mode,
     selection = _useSharedPluginState.selection,
-    width = _useSharedPluginState.width;
+    width = _useSharedPluginState.width,
+    limitedModeEnabled = _useSharedPluginState.limitedModeEnabled;
   var isLivePageViewMode = mode === 'view';
 
   /**
@@ -126,6 +130,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     hoveredCell: hoveredCell,
     isTableHovered: isTableHovered,
     isWholeTableInDanger: isWholeTableInDanger,
-    selection: selection
+    selection: selection,
+    limitedMode: limitedModeEnabled
   });
 };

package/dist/cjs/nodeviews/TableRow.js

@@ -17,6 +17,7 @@ var _nesting = require("@atlaskit/editor-common/nesting");
 var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -38,7 +39,6 @@ var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   function TableRow(node, view, getPos, eventDispatcher, api) {
-    var _api$limitedMode;
     var _this;
     (0, _classCallCheck2.default)(this, TableRow);
     _this = _callSuper(this, TableRow, [node, view, getPos, eventDispatcher]);
@@ -94,10 +94,38 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
     var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
       pluginConfig = _getPluginState.pluginConfig;
     _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    if (api !== null && api !== void 0 && (_api$limitedMode = api.limitedMode) !== null && _api$limitedMode !== void 0 && (_api$limitedMode = _api$limitedMode.sharedState.currentState()) !== null && _api$limitedMode !== void 0 && (_api$limitedMode = _api$limitedMode.limitedModePluginKey.getState(view.state)) !== null && _api$limitedMode !== void 0 && _api$limitedMode.documentSizeBreachesThreshold) {
-      _this.isStickyHeaderEnabled = false;
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      document.addEventListener('limited-mode-activated', _this.cleanup);
+
+    // Sticky headers are the only thing limited mode turns off here, so there is nothing to read
+    // or subscribe to when they were never enabled for this editor.
+    if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_dynamic_limited_mode')) {
+      var _api$limitedMode, _limitedMode$currentS;
+      var limitedMode = _this.isStickyHeaderEnabled ? api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.sharedState : undefined;
+      if (limitedMode !== null && limitedMode !== void 0 && (_limitedMode$currentS = limitedMode.currentState()) !== null && _limitedMode$currentS !== void 0 && _limitedMode$currentS.enabled) {
+        _this.isStickyHeaderEnabled = false;
+      } else {
+        _this.limitedModeUnsubscribe = limitedMode === null || limitedMode === void 0 ? void 0 : limitedMode.onChange(function (_ref) {
+          var _this$limitedModeUnsu, _this2;
+          var nextSharedState = _ref.nextSharedState;
+          if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.enabled)) {
+            return;
+          }
+
+          // Order matters: cleanup() short-circuits unless sticky headers are still marked enabled.
+          _this.cleanup();
+          _this.isStickyHeaderEnabled = false;
+
+          // Limited mode never turns back off, so this listener has done its job.
+          (_this$limitedModeUnsu = (_this2 = _this).limitedModeUnsubscribe) === null || _this$limitedModeUnsu === void 0 || _this$limitedModeUnsu.call(_this2);
+          _this.limitedModeUnsubscribe = undefined;
+        });
+      }
+    } else {
+      var _api$limitedMode2;
+      if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.limitedModePluginKey.getState(view.state)) !== null && _api$limitedMode2 !== void 0 && _api$limitedMode2.documentSizeBreachesThreshold) {
+        _this.isStickyHeaderEnabled = false;
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.addEventListener('limited-mode-activated', _this.cleanup);
+      }
     }
     var pos = _this.getPos();
     _this.isInNestedTable = false;
@@ -195,9 +223,14 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         }
         this.emitOff(true);
       }
-
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      document.removeEventListener('limited-mode-activated', this.cleanup);
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_dynamic_limited_mode')) {
+        var _this$limitedModeUnsu2;
+        (_this$limitedModeUnsu2 = this.limitedModeUnsubscribe) === null || _this$limitedModeUnsu2 === void 0 || _this$limitedModeUnsu2.call(this);
+        this.limitedModeUnsubscribe = undefined;
+      } else {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        document.removeEventListener('limited-mode-activated', this.cleanup);
+      }
       if (this.tableContainerObserver) {
         this.tableContainerObserver.disconnect();
       }
@@ -292,7 +325,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this2 = this;
+      var _this3 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -311,7 +344,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
       window.requestAnimationFrame(function () {
         var getTableContainer = function getTableContainer() {
           var _getTree;
-          return (_getTree = (0, _dom2.getTree)(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+          return (_getTree = (0, _dom2.getTree)(_this3.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
         };
 
         // we expect tree to be defined after animation frame
@@ -337,16 +370,16 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
             return getSentinelTop() !== null && getSentinelBottom() !== null;
           };
           var observeStickySentinels = function observeStickySentinels() {
-            _this2.sentinels.top = getSentinelTop();
-            _this2.sentinels.bottom = getSentinelBottom();
-            [_this2.sentinels.top, _this2.sentinels.bottom].forEach(function (el) {
+            _this3.sentinels.top = getSentinelTop();
+            _this3.sentinels.bottom = getSentinelBottom();
+            [_this3.sentinels.top, _this3.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
-                _this2.intersectionObserver.observe(el);
+                _this3.intersectionObserver.observe(el);
               }
             });
           };
@@ -361,7 +394,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
             // 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
-            _this2.tableContainerObserver = new MutationObserver(function () {
+            _this3.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).
 
@@ -369,14 +402,14 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
                 tableContainer = getTableContainer();
               }
               if (sentinelsInDom()) {
-                var _this2$tableContainer;
+                var _this3$tableContainer;
                 observeStickySentinels();
-                (_this2$tableContainer = _this2.tableContainerObserver) === null || _this2$tableContainer === void 0 || _this2$tableContainer.disconnect();
+                (_this3$tableContainer = _this3.tableContainerObserver) === null || _this3$tableContainer === void 0 || _this3$tableContainer.disconnect();
               }
             });
             var mutatingNode = tableContainer;
-            if (mutatingNode && _this2.tableContainerObserver) {
-              _this2.tableContainerObserver.observe(mutatingNode, {
+            if (mutatingNode && _this3.tableContainerObserver) {
+              _this3.tableContainerObserver.observe(mutatingNode, {
                 subtree: true,
                 childList: true
               });
@@ -391,32 +424,32 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this3 = this;
+      var _this4 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = (0, _dom2.getTree)(_this3.dom);
+        var tree = (0, _dom2.getTree)(_this4.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this3$editorScrollab;
+          var _this4$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 === ((_this3$editorScrollab = _this3.editorScrollableElement) === null || _this3$editorScrollab === void 0 ? void 0 : _this3$editorScrollab.className)) {
-            _this3.updateStickyHeaderWidth();
+          if (entry.target.className === ((_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 ? void 0 : _this4$editorScrollab.className)) {
+            _this4.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 (_this3.sentinels.bottom &&
+            if (_this4.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 - (_this3.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
-              _this3.stickyRowHeight = newHeight;
-              _this3.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this4.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
+              _this4.stickyRowHeight = newHeight;
+              _this4.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
               (0, _dom.updateStickyMargins)(table);
             }
           }
@@ -426,13 +459,13 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this4 = this;
+      var _this5 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var _this4$editorScrollab, _this4$editorScrollab2;
+        var _this5$editorScrollab, _this5$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 = (_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 || (_this4$editorScrollab2 = _this4$editorScrollab.getBoundingClientRect) === null || _this4$editorScrollab2 === void 0 ? void 0 : _this4$editorScrollab2.call(_this4$editorScrollab);
+        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);
         entries.forEach(function (entry) {
           var target = entry.target,
             isIntersecting = entry.isIntersecting,
@@ -440,15 +473,15 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
           // 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
-          _this4.sentinelData[targetKey] = {
+          _this5.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
-          _this4.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
+          _this5.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
         });
-        _this4.refreshStickyState();
+        _this5.refreshStickyState();
       }, {
         threshold: 0,
         root: this.editorScrollableElement
@@ -654,12 +687,12 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this5 = this;
+      var _this6 = this;
       if (this.isSticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this5.intersectionObserver) {
-            _this5.intersectionObserver.unobserve(el);
-            _this5.intersectionObserver.observe(el);
+          if (el && _this6.intersectionObserver) {
+            _this6.intersectionObserver.unobserve(el);
+            _this6.intersectionObserver.observe(el);
           }
         });
       }
@@ -668,7 +701,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
     key: "makeHeaderRowSticky",
     value: function makeHeaderRowSticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this6 = this;
+        _this7 = 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;
@@ -707,7 +740,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this6.refireIntersectionObservers();
+          _this7.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";