@atlaskit/editor-plugin-expand 15.0.5 → 15.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-expand
 
+## 15.1.0
+
+### Minor Changes
+
+- [`2d23b40eed4f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d23b40eed4f0) -
+  Add gated content-visibility:auto to tables, expands and media singles to improve editor rendering
+  performance on large documents. Applied only to nodes whose rendered size can be estimated closely
+  — structurally (row/child counts) for tables and expands, and from the media's own dimensions and
+  the renderer's width calculation for media singles. Behind the
+  cc_editor_limited_mode_perf_improvements experiment and only active when limited mode is enabled
+  for the document (shared large-document detection with the limited-mode plugin).
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.0.5
 
 ### Patch Changes

package/dist/cjs/legacyExpand/nodeviews/index.js

@@ -16,6 +16,7 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _contentVisibility = require("@atlaskit/editor-common/utils/content-visibility");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -535,6 +536,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
     this.content = this.dom.querySelector(".".concat(_styles.expandClassNames.content));
+    (0, _contentVisibility.applyContentVisibility)(this.dom, this.isLimitedModeEnabled(), function () {
+      return {
+        height: (0, _contentVisibility.estimateExpandIntrinsicHeight)(_this.node, !_this.isCollapsed())
+      };
+    });
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = (0, _v.default)();
     if ((0, _expValEquals.expValEquals)('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
@@ -623,14 +629,31 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "updateDisplayStyle",
     value: function updateDisplayStyle(node) {
+      var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
       if (this.content) {
-        var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
         if (isCollapsed) {
           this.content.classList.add(_styles.expandClassNames.contentCollapsed);
         } else {
           this.content.classList.remove(_styles.expandClassNames.contentCollapsed);
         }
       }
+      // Collapsed vs expanded changes the reserved height, so re-apply the intrinsic-size estimate.
+      if (this.dom) {
+        (0, _contentVisibility.applyContentVisibility)(this.dom, this.isLimitedModeEnabled(), function () {
+          return {
+            height: (0, _contentVisibility.estimateExpandIntrinsicHeight)(node, !isCollapsed)
+          };
+        });
+      }
+    }
+  }, {
+    key: "isLimitedModeEnabled",
+    value: function isLimitedModeEnabled() {
+      var _this$api9;
+      // Read from `this.view.state` via the exposed plugin key rather than the shared state's
+      // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
+      // API's editor state isn't wired up yet).
+      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.documentSizeBreachesThreshold);
     }
   }, {
     key: "stopEvent",
@@ -658,6 +681,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     value: function update(node, _decorations) {
       var _this4 = this;
       if (this.node.type === node.type) {
+        // Re-apply in case limited mode flipped from disabled→enabled after the document loaded
+        // (the flip is transaction-driven, so this update() fires once it becomes enabled).
+        var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
+        (0, _contentVisibility.applyContentVisibility)(this.dom, this.isLimitedModeEnabled(), function () {
+          return {
+            height: (0, _contentVisibility.estimateExpandIntrinsicHeight)(node, !isCollapsed)
+          };
+        });
         if (this.node.attrs.__expanded !== node.attrs.__expanded) {
           // Instead of re-rendering the view on an expand toggle
           // we toggle a class name to hide the content and animate the chevron.

package/dist/cjs/singlePlayerExpand/node-views/index.js

@@ -17,8 +17,10 @@ var _expand = require("@atlaskit/editor-common/expand");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
+var _contentVisibility = require("@atlaskit/editor-common/utils/content-visibility");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -516,6 +518,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     if (!_expand.expandedState.has(this.node)) {
       _expand.expandedState.set(this.node, false);
     }
+    (0, _contentVisibility.applyContentVisibility)(this.dom, this.isLimitedModeEnabled(), function () {
+      return {
+        height: (0, _contentVisibility.estimateExpandIntrinsicHeight)(_this.node, !(0, _expand.isExpandCollapsed)(_this.node))
+      };
+    });
     if ((0, _expValEquals.expValEquals)('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
       this.renderNativeIcon(this.node);
     } else {
@@ -537,19 +544,39 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
     if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
-      this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
-        var editorDisabled = sharedState.nextSharedState.editorDisabled;
-        if (_this.input) {
-          if (editorDisabled) {
-            _this.input.setAttribute('readonly', 'true');
-          } else {
-            _this.input.removeAttribute('readonly');
-          }
-        }
-        if (_this.content) {
-          _this.content.setAttribute('contenteditable', _this.getContentEditable(_this.node) ? 'true' : 'false');
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('cc_editor_limited_mode_perf_improvements')) {
+        if (this.content) {
+          this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
         }
-      });
+        this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
+          var editorDisabled = sharedState.nextSharedState.editorDisabled;
+          if (_this.input) {
+            if (editorDisabled) {
+              _this.input.setAttribute('readonly', 'true');
+            } else {
+              _this.input.removeAttribute('readonly');
+            }
+          }
+          var nextContentEditableValue = _this.getContentEditable(_this.node) ? 'true' : 'false';
+          if (_this.content && _this.content.getAttribute('contenteditable') !== nextContentEditableValue) {
+            _this.content.setAttribute('contenteditable', nextContentEditableValue);
+          }
+        });
+      } else {
+        this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
+          var editorDisabled = sharedState.nextSharedState.editorDisabled;
+          if (_this.input) {
+            if (editorDisabled) {
+              _this.input.setAttribute('readonly', 'true');
+            } else {
+              _this.input.removeAttribute('readonly');
+            }
+          }
+          if (_this.content) {
+            _this.content.setAttribute('contenteditable', _this.getContentEditable(_this.node) ? 'true' : 'false');
+          }
+        });
+      }
     }
   }
   return (0, _createClass2.default)(ExpandNodeView, [{
@@ -599,6 +626,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           }
         }
         this.node = node;
+        // Re-apply in case limited mode flipped from disabled→enabled after the document loaded
+        // (the flip is transaction-driven, so this update() fires once it becomes enabled).
+        (0, _contentVisibility.applyContentVisibility)(this.dom, this.isLimitedModeEnabled(), function () {
+          return {
+            height: (0, _contentVisibility.estimateExpandIntrinsicHeight)(_this2.node, !(0, _expand.isExpandCollapsed)(_this2.node))
+          };
+        });
         var currentExpanded = (_expandedState$get2 = _expand.expandedState.get(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false;
         var hasChanged = (0, _experiments.editorExperiment)('platform_editor_block_menu', true, {
           exposure: true
@@ -640,6 +674,15 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         expanded: expanded !== null && expanded !== void 0 ? expanded : false
       };
     }
+  }, {
+    key: "isLimitedModeEnabled",
+    value: function isLimitedModeEnabled() {
+      var _this$api9;
+      // Read from `this.view.state` via the exposed plugin key rather than the shared state's
+      // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
+      // API's editor state isn't wired up yet).
+      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.documentSizeBreachesThreshold);
+    }
   }, {
     key: "updateDisplayStyle",
     value: function updateDisplayStyle(node) {
@@ -650,6 +693,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           this.content.classList.remove(_styles.expandClassNames.contentCollapsed);
         }
       }
+      // Collapsed vs expanded changes the reserved height, so re-apply the intrinsic-size estimate.
+      (0, _contentVisibility.applyContentVisibility)(this.dom, this.isLimitedModeEnabled(), function () {
+        return {
+          height: (0, _contentVisibility.estimateExpandIntrinsicHeight)(node, !(0, _expand.isExpandCollapsed)(node))
+        };
+      });
     }
   }, {
     key: "updateExpandBodyContentEditable",

package/dist/es2019/legacyExpand/nodeviews/index.js

@@ -7,6 +7,7 @@ import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
 import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
+import { applyContentVisibility, estimateExpandIntrinsicHeight } from '@atlaskit/editor-common/utils/content-visibility';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -543,6 +544,9 @@ export class ExpandNodeView {
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
     this.content = this.dom.querySelector(`.${expandClassNames.content}`);
+    applyContentVisibility(this.dom, this.isLimitedModeEnabled(), () => ({
+      height: estimateExpandIntrinsicHeight(this.node, !this.isCollapsed())
+    }));
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = uuid();
     if (expValEquals('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
@@ -622,14 +626,27 @@ export class ExpandNodeView {
     }), this.icon, this.renderKey);
   }
   updateDisplayStyle(node) {
+    const isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
     if (this.content) {
-      const isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
       if (isCollapsed) {
         this.content.classList.add(expandClassNames.contentCollapsed);
       } else {
         this.content.classList.remove(expandClassNames.contentCollapsed);
       }
     }
+    // Collapsed vs expanded changes the reserved height, so re-apply the intrinsic-size estimate.
+    if (this.dom) {
+      applyContentVisibility(this.dom, this.isLimitedModeEnabled(), () => ({
+        height: estimateExpandIntrinsicHeight(node, !isCollapsed)
+      }));
+    }
+  }
+  isLimitedModeEnabled() {
+    var _this$api9, _this$api9$limitedMod, _this$api9$limitedMod2, _this$api9$limitedMod3, _this$api9$limitedMod4;
+    // Read from `this.view.state` via the exposed plugin key rather than the shared state's
+    // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
+    // API's editor state isn't wired up yet).
+    return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 ? void 0 : (_this$api9$limitedMod = _this$api9.limitedMode) === null || _this$api9$limitedMod === void 0 ? void 0 : (_this$api9$limitedMod2 = _this$api9$limitedMod.sharedState.currentState()) === null || _this$api9$limitedMod2 === void 0 ? void 0 : (_this$api9$limitedMod3 = _this$api9$limitedMod2.limitedModePluginKey) === null || _this$api9$limitedMod3 === void 0 ? void 0 : (_this$api9$limitedMod4 = _this$api9$limitedMod3.getState(this.view.state)) === null || _this$api9$limitedMod4 === void 0 ? void 0 : _this$api9$limitedMod4.documentSizeBreachesThreshold);
   }
   stopEvent(event) {
     // Ignored via go/ees005
@@ -650,6 +667,12 @@ export class ExpandNodeView {
   }
   update(node, _decorations) {
     if (this.node.type === node.type) {
+      // Re-apply in case limited mode flipped from disabled→enabled after the document loaded
+      // (the flip is transaction-driven, so this update() fires once it becomes enabled).
+      const isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
+      applyContentVisibility(this.dom, this.isLimitedModeEnabled(), () => ({
+        height: estimateExpandIntrinsicHeight(node, !isCollapsed)
+      }));
       if (this.node.attrs.__expanded !== node.attrs.__expanded) {
         // Instead of re-rendering the view on an expand toggle
         // we toggle a class name to hide the content and animate the chevron.

package/dist/es2019/singlePlayerExpand/node-views/index.js

@@ -8,8 +8,10 @@ import { expandedState, isExpandCollapsed } from '@atlaskit/editor-common/expand
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
+import { applyContentVisibility, estimateExpandIntrinsicHeight } from '@atlaskit/editor-common/utils/content-visibility';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { redo, undo } from '@atlaskit/prosemirror-history';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -520,6 +522,9 @@ export class ExpandNodeView {
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
+    applyContentVisibility(this.dom, this.isLimitedModeEnabled(), () => ({
+      height: estimateExpandIntrinsicHeight(this.node, !isExpandCollapsed(this.node))
+    }));
     if (expValEquals('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
       this.renderNativeIcon(this.node);
     } else {
@@ -541,19 +546,39 @@ export class ExpandNodeView {
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
     if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
-      this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(sharedState => {
-        const editorDisabled = sharedState.nextSharedState.editorDisabled;
-        if (this.input) {
-          if (editorDisabled) {
-            this.input.setAttribute('readonly', 'true');
-          } else {
-            this.input.removeAttribute('readonly');
-          }
-        }
+      if (isExperimentEnabled('cc_editor_limited_mode_perf_improvements')) {
         if (this.content) {
           this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
         }
-      });
+        this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(sharedState => {
+          const editorDisabled = sharedState.nextSharedState.editorDisabled;
+          if (this.input) {
+            if (editorDisabled) {
+              this.input.setAttribute('readonly', 'true');
+            } else {
+              this.input.removeAttribute('readonly');
+            }
+          }
+          const nextContentEditableValue = this.getContentEditable(this.node) ? 'true' : 'false';
+          if (this.content && this.content.getAttribute('contenteditable') !== nextContentEditableValue) {
+            this.content.setAttribute('contenteditable', nextContentEditableValue);
+          }
+        });
+      } else {
+        this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(sharedState => {
+          const editorDisabled = sharedState.nextSharedState.editorDisabled;
+          if (this.input) {
+            if (editorDisabled) {
+              this.input.setAttribute('readonly', 'true');
+            } else {
+              this.input.removeAttribute('readonly');
+            }
+          }
+          if (this.content) {
+            this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
+          }
+        });
+      }
     }
   }
   stopEvent(event) {
@@ -596,6 +621,11 @@ export class ExpandNodeView {
         }
       }
       this.node = node;
+      // Re-apply in case limited mode flipped from disabled→enabled after the document loaded
+      // (the flip is transaction-driven, so this update() fires once it becomes enabled).
+      applyContentVisibility(this.dom, this.isLimitedModeEnabled(), () => ({
+        height: estimateExpandIntrinsicHeight(this.node, !isExpandCollapsed(this.node))
+      }));
       const currentExpanded = (_expandedState$get2 = expandedState.get(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false;
       const hasChanged = editorExperiment('platform_editor_block_menu', true, {
         exposure: true
@@ -633,6 +663,13 @@ export class ExpandNodeView {
       expanded: expanded !== null && expanded !== void 0 ? expanded : false
     };
   }
+  isLimitedModeEnabled() {
+    var _this$api9, _this$api9$limitedMod, _this$api9$limitedMod2, _this$api9$limitedMod3, _this$api9$limitedMod4;
+    // Read from `this.view.state` via the exposed plugin key rather than the shared state's
+    // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
+    // API's editor state isn't wired up yet).
+    return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 ? void 0 : (_this$api9$limitedMod = _this$api9.limitedMode) === null || _this$api9$limitedMod === void 0 ? void 0 : (_this$api9$limitedMod2 = _this$api9$limitedMod.sharedState.currentState()) === null || _this$api9$limitedMod2 === void 0 ? void 0 : (_this$api9$limitedMod3 = _this$api9$limitedMod2.limitedModePluginKey) === null || _this$api9$limitedMod3 === void 0 ? void 0 : (_this$api9$limitedMod4 = _this$api9$limitedMod3.getState(this.view.state)) === null || _this$api9$limitedMod4 === void 0 ? void 0 : _this$api9$limitedMod4.documentSizeBreachesThreshold);
+  }
   updateDisplayStyle(node) {
     if (this.content) {
       if (isExpandCollapsed(node)) {
@@ -641,6 +678,10 @@ export class ExpandNodeView {
         this.content.classList.remove(expandClassNames.contentCollapsed);
       }
     }
+    // Collapsed vs expanded changes the reserved height, so re-apply the intrinsic-size estimate.
+    applyContentVisibility(this.dom, this.isLimitedModeEnabled(), () => ({
+      height: estimateExpandIntrinsicHeight(node, !isExpandCollapsed(node))
+    }));
   }
   updateExpandBodyContentEditable() {
     // Disallow interaction/selection inside expand body when collapsed.

package/dist/esm/legacyExpand/nodeviews/index.js

@@ -11,6 +11,7 @@ import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
 import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
+import { applyContentVisibility, estimateExpandIntrinsicHeight } from '@atlaskit/editor-common/utils/content-visibility';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -528,6 +529,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
     this.content = this.dom.querySelector(".".concat(expandClassNames.content));
+    applyContentVisibility(this.dom, this.isLimitedModeEnabled(), function () {
+      return {
+        height: estimateExpandIntrinsicHeight(_this.node, !_this.isCollapsed())
+      };
+    });
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     this.renderKey = uuid();
     if (expValEquals('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
@@ -616,14 +622,31 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "updateDisplayStyle",
     value: function updateDisplayStyle(node) {
+      var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
       if (this.content) {
-        var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
         if (isCollapsed) {
           this.content.classList.add(expandClassNames.contentCollapsed);
         } else {
           this.content.classList.remove(expandClassNames.contentCollapsed);
         }
       }
+      // Collapsed vs expanded changes the reserved height, so re-apply the intrinsic-size estimate.
+      if (this.dom) {
+        applyContentVisibility(this.dom, this.isLimitedModeEnabled(), function () {
+          return {
+            height: estimateExpandIntrinsicHeight(node, !isCollapsed)
+          };
+        });
+      }
+    }
+  }, {
+    key: "isLimitedModeEnabled",
+    value: function isLimitedModeEnabled() {
+      var _this$api9;
+      // Read from `this.view.state` via the exposed plugin key rather than the shared state's
+      // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
+      // API's editor state isn't wired up yet).
+      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.documentSizeBreachesThreshold);
     }
   }, {
     key: "stopEvent",
@@ -651,6 +674,14 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     value: function update(node, _decorations) {
       var _this4 = this;
       if (this.node.type === node.type) {
+        // Re-apply in case limited mode flipped from disabled→enabled after the document loaded
+        // (the flip is transaction-driven, so this update() fires once it becomes enabled).
+        var isCollapsed = this.__livePage ? node.attrs.__expanded : !node.attrs.__expanded;
+        applyContentVisibility(this.dom, this.isLimitedModeEnabled(), function () {
+          return {
+            height: estimateExpandIntrinsicHeight(node, !isCollapsed)
+          };
+        });
         if (this.node.attrs.__expanded !== node.attrs.__expanded) {
           // Instead of re-rendering the view on an expand toggle
           // we toggle a class name to hide the content and animate the chevron.

package/dist/esm/singlePlayerExpand/node-views/index.js

@@ -10,8 +10,10 @@ import { expandedState, isExpandCollapsed } from '@atlaskit/editor-common/expand
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
+import { applyContentVisibility, estimateExpandIntrinsicHeight } from '@atlaskit/editor-common/utils/content-visibility';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { redo, undo } from '@atlaskit/prosemirror-history';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -508,6 +510,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
+    applyContentVisibility(this.dom, this.isLimitedModeEnabled(), function () {
+      return {
+        height: estimateExpandIntrinsicHeight(_this.node, !isExpandCollapsed(_this.node))
+      };
+    });
     if (expValEquals('platform_editor_vc90_transition_expand_icon', 'isEnabled', true)) {
       this.renderNativeIcon(this.node);
     } else {
@@ -529,19 +536,39 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
     if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
-      this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
-        var editorDisabled = sharedState.nextSharedState.editorDisabled;
-        if (_this.input) {
-          if (editorDisabled) {
-            _this.input.setAttribute('readonly', 'true');
-          } else {
-            _this.input.removeAttribute('readonly');
-          }
-        }
-        if (_this.content) {
-          _this.content.setAttribute('contenteditable', _this.getContentEditable(_this.node) ? 'true' : 'false');
+      if (isExperimentEnabled('cc_editor_limited_mode_perf_improvements')) {
+        if (this.content) {
+          this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
         }
-      });
+        this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
+          var editorDisabled = sharedState.nextSharedState.editorDisabled;
+          if (_this.input) {
+            if (editorDisabled) {
+              _this.input.setAttribute('readonly', 'true');
+            } else {
+              _this.input.removeAttribute('readonly');
+            }
+          }
+          var nextContentEditableValue = _this.getContentEditable(_this.node) ? 'true' : 'false';
+          if (_this.content && _this.content.getAttribute('contenteditable') !== nextContentEditableValue) {
+            _this.content.setAttribute('contenteditable', nextContentEditableValue);
+          }
+        });
+      } else {
+        this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
+          var editorDisabled = sharedState.nextSharedState.editorDisabled;
+          if (_this.input) {
+            if (editorDisabled) {
+              _this.input.setAttribute('readonly', 'true');
+            } else {
+              _this.input.removeAttribute('readonly');
+            }
+          }
+          if (_this.content) {
+            _this.content.setAttribute('contenteditable', _this.getContentEditable(_this.node) ? 'true' : 'false');
+          }
+        });
+      }
     }
   }
   return _createClass(ExpandNodeView, [{
@@ -591,6 +618,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           }
         }
         this.node = node;
+        // Re-apply in case limited mode flipped from disabled→enabled after the document loaded
+        // (the flip is transaction-driven, so this update() fires once it becomes enabled).
+        applyContentVisibility(this.dom, this.isLimitedModeEnabled(), function () {
+          return {
+            height: estimateExpandIntrinsicHeight(_this2.node, !isExpandCollapsed(_this2.node))
+          };
+        });
         var currentExpanded = (_expandedState$get2 = expandedState.get(node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false;
         var hasChanged = editorExperiment('platform_editor_block_menu', true, {
           exposure: true
@@ -632,6 +666,15 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         expanded: expanded !== null && expanded !== void 0 ? expanded : false
       };
     }
+  }, {
+    key: "isLimitedModeEnabled",
+    value: function isLimitedModeEnabled() {
+      var _this$api9;
+      // Read from `this.view.state` via the exposed plugin key rather than the shared state's
+      // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
+      // API's editor state isn't wired up yet).
+      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.documentSizeBreachesThreshold);
+    }
   }, {
     key: "updateDisplayStyle",
     value: function updateDisplayStyle(node) {
@@ -642,6 +685,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           this.content.classList.remove(expandClassNames.contentCollapsed);
         }
       }
+      // Collapsed vs expanded changes the reserved height, so re-apply the intrinsic-size estimate.
+      applyContentVisibility(this.dom, this.isLimitedModeEnabled(), function () {
+        return {
+          height: estimateExpandIntrinsicHeight(node, !isExpandCollapsed(node))
+        };
+      });
     }
   }, {
     key: "updateExpandBodyContentEditable",

package/dist/types/legacyExpand/nodeviews/index.d.ts

@@ -50,6 +50,7 @@ export declare class ExpandNodeView implements NodeView {
     private handleRedoFromTitle;
     private getContentEditable;
     private updateDisplayStyle;
+    private isLimitedModeEnabled;
     stopEvent(event: Event): boolean;
     ignoreMutation(mutationRecord: MutationRecord | {
         target: Node;

package/dist/types/singlePlayerExpand/node-views/index.d.ts

@@ -57,6 +57,7 @@ export declare class ExpandNodeView implements NodeView {
     }): boolean;
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
     updateExpandToggleIcon(node: PmNode): void;
+    private isLimitedModeEnabled;
     private updateDisplayStyle;
     updateExpandBodyContentEditable(): void;
     private renderNativeIcon;

package/dist/types/types.d.ts

@@ -7,6 +7,7 @@ import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { LimitedModePlugin } from '@atlaskit/editor-plugin-limited-mode/limited-mode-plugin-type';
 import type { LocalIdPlugin } from '@atlaskit/editor-plugin-local-id';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
@@ -53,6 +54,7 @@ export type ExpandPluginDependencies = [
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
     OptionalPlugin<EditorViewModePlugin>,
+    OptionalPlugin<LimitedModePlugin>,
     OptionalPlugin<BlockMenuPlugin>,
     OptionalPlugin<LocalIdPlugin>,
     OptionalPlugin<BlockControlsPlugin>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "15.0.5",
+	"version": "15.1.0",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,6 +29,7 @@
 		"@atlaskit/editor-plugin-decorations": "^14.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^14.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^16.0.0",
+		"@atlaskit/editor-plugin-limited-mode": "^11.0.0",
 		"@atlaskit/editor-plugin-local-id": "^12.0.0",
 		"@atlaskit/editor-plugin-selection": "^14.0.0",
 		"@atlaskit/editor-plugin-selection-marker": "^14.0.0",
@@ -38,6 +39,7 @@
 		"@atlaskit/editor-toolbar": "^2.4.0",
 		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/icon-lab": "^7.5.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/prosemirror-history": "^1.1.0",
 		"@atlaskit/tmp-editor-statsig": "^147.0.0",
@@ -49,7 +51,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.10.0",
+		"@atlaskit/editor-common": "^118.11.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"