@atlaskit/editor-plugin-expand 15.0.5 → 15.2.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-plugin-expand
 
+## 15.2.0
+
+### Minor Changes
+
+- [`da5eaf0bc37da`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da5eaf0bc37da) -
+  Clean up the platform_editor_editor_ssr_streaming experiment. The SSR streaming code paths are now
+  permanent and the isSSRStreaming() utility has been removed from
+  @atlaskit/editor-common/core-utils.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/abb2d576-3082-4a86-ade1-4659d5e66889
 name: '@atlaskit/editor-plugin-expand'
-ownerId: ari:cloud:identity::team/2484e1f6-f62c-4a70-95f1-8e5695c51b6b # Editor Jenga
+ownerId: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb # Editor Developers
 labels:
   - platform-code
   - platform-afm
@@ -16,14 +16,14 @@ links:
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
   - name: Slack Channel
     type: CHAT_CHANNEL
-    url: https://atlassian.enterprise.slack.com/archives/C061GUMN3NY # #team-cc-editor-exp-cloud-native
+    url: https://atlassian.enterprise.slack.com/archives/CFG3PSQ9E # #help-editor
   - name: Editor Plugin Expand
     type: REPOSITORY
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/editor-plugin-expand
 customFields:
   - name: Department
     type: text
-    value: Eng - Editor Autonomy - Jenga
+    value: Editor Developers
   - name: Trusted Reviewer Teams
     type: text
     value: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb

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

@@ -12,13 +12,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _w3cKeyname = require("w3c-keyname");
-var _coreUtils = require("@atlaskit/editor-common/core-utils");
 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");
@@ -496,7 +497,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       this.isExpanded.localId = _node.attrs.localId;
     }
     var editorDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
-    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _NodeView.toDOM)(_node, this.__livePage, this.intl, editorDisabled, (0, _coreUtils.isSSRStreaming)() ? !editorDisabled && !(0, _expand.isExpandCollapsed)(_node) : undefined)),
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _NodeView.toDOM)(_node, this.__livePage, this.intl, editorDisabled, !editorDisabled && !(0, _expand.isExpandCollapsed)(_node))),
       _dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     // Ignored via go/ees005
@@ -516,6 +517,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 +543,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 +625,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 +673,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 +692,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

@@ -3,13 +3,14 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
-import { isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 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';
@@ -502,7 +503,7 @@ export class ExpandNodeView {
     const {
       dom: _dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, editorDisabled, isSSRStreaming() ? !editorDisabled && !isExpandCollapsed(_node) : undefined));
+    } = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, editorDisabled, !editorDisabled && !isExpandCollapsed(_node)));
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     this.dom = _dom;
@@ -520,6 +521,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 +545,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 +620,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 +662,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 +677,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

@@ -5,13 +5,14 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
-import { isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 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';
@@ -488,7 +489,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       this.isExpanded.localId = _node.attrs.localId;
     }
     var editorDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
-    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, editorDisabled, isSSRStreaming() ? !editorDisabled && !isExpandCollapsed(_node) : undefined)),
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, editorDisabled, !editorDisabled && !isExpandCollapsed(_node))),
       _dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     // Ignored via go/ees005
@@ -508,6 +509,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 +535,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 +617,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 +665,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 +684,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.2.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,9 +39,10 @@
 		"@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",
+		"@atlaskit/tmp-editor-statsig": "^147.1.0",
 		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -49,7 +51,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.10.0",
+		"@atlaskit/editor-common": "^118.12.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"