@atlaskit/renderer 137.1.6 → 137.1.7

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/renderer
 
+## 137.1.7
+
+### Patch Changes
+
+- [`2a540b54c3b3d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a540b54c3b3d) -
+  Two fixes to the lazy loading of collapsed expand bodies, now behind the
+  `platform_editor_defer_collapsed_expand_body` experiment rather than the
+  `hot-121622_lazy_load_expand_content` feature gate.
+
+  The body is now only held back where `hidden="until-found"` can reveal it again. Without it
+  nothing can reveal the text standing in for the body, so browser find cannot reach the content and
+  the body was missing for no gain — those browsers render the body as normal.
+
+  `display: block` is now set on the collapsed wrapper alongside the attribute. Products ship a CSS
+  reset with `[hidden] { display: none }`, and as an author rule it beats the UA stylesheet's
+  `content-visibility` for `[hidden="until-found"]`, taking the content out of the page where
+  browser find cannot reach it at all.
+
+  `user-select: none` is no longer set on the collapsed wrapper while browser find is enabled.
+  WebKit scrolls to a find-in-page match by selecting it, so unselectable text was matched but never
+  revealed: Safari reported a hit, the attribute stayed in place, and the expand never opened.
+  Chrome does not need a selection, which hid the problem. Nothing is lost by leaving it off,
+  because `content-visibility: hidden` already makes a skipped subtree unselectable.
+
+  A collapsed expand no longer replaces its whole body with text. Instead each block of the body
+  shows its own text, and blocks holding something that can be opened on its own — a nested expand,
+  or an extension whose stashed ADF a nested renderer mounts expands from — are rendered as they
+  are. So a nested expand keeps a real element while its parent is collapsed, which is what lets
+  browser find reveal it directly: one match now opens every expand on the path to it and none
+  beside it, where before it opened only the outermost one and left the reader searching again at
+  each level. Because blocks decide for themselves rather than being swapped out, opening an expand
+  no longer rebuilds everything inside it.
+
+- Updated dependencies
+
 ## 137.1.6
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -15,6 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _expandBody = require("../ui/expand-body");
 var _nodes = require("./nodes");
 var _textWrapper = _interopRequireDefault(require("./nodes/text-wrapper"));
 var _links = require("./utils/links");
@@ -99,12 +100,13 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var shouldSkipLinkMark = function shouldSkipLinkMark(mark) {
         return _this.allowMediaLinking !== true && isMedia && mark.type.name === 'link';
       };
-      return marks.reduceRight(function (content, mark) {
+      var serialized = marks.reduceRight(function (content, mark) {
         if (shouldSkipLinkMark(mark) || shouldSkipBorderMark(mark)) {
           return content;
         }
         return _this.renderMark((0, _marks.toReact)(mark), _this.withMediaMarkProps(node, mark, _this.getMarkProps(mark, [], node)), "".concat(mark.type.name, "-").concat(index), content);
       }, serializedContent);
+      return (0, _expandBody.withExpandBodyBlock)(node, currentPath, index, serialized);
     });
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -283,7 +285,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         case 'expand':
           return this.getExpandProps(node, path);
         case 'nestedExpand':
-          if ((0, _fg.fg)('hot-121622_lazy_load_expand_content')) {
+          if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_defer_collapsed_expand_body')) {
             return this.getExpandProps(node, path);
           }
           return this.getProps(node, path);
@@ -315,7 +317,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       if (key === 'root-0') {
         this.resetState();
       }
-      return this.renderNode(target, props, key, this.getChildNodes(fragment).map(function (node, index) {
+      return this.renderNode(target, props, key, (0, _expandBody.mergeExpandBodyText)(this.getChildNodes(fragment).map(function (node, index) {
         if ((0, _nodes.isTextWrapper)(node)) {
           return _this2.serializeTextWrapper(node.content, {
             index: index,
@@ -326,7 +328,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
           index: index,
           parentInfo: parentInfo
         });
-      }));
+      })));
     }
   }, {
     key: "serializeTextWrapper",
@@ -736,11 +738,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     value: function getExpandProps(node) {
       var _this7 = this;
       var _path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      // Expand receives the node rather than a precomputed string so it can derive the collapsed
-      // text mirror only when it actually renders one — a nested expand is not mounted until its
-      // ancestor opens — and so that derivation can reach content the model walk cannot, such as
-      // the ADF stashed in a coerced extension's `parameters.nestedContent`. Expand owns the
-      // feature gate check.
+      // Expand is given the node so it can tell whether it opted into lazy body loading at all. The
+      // text each block shows is attached to the block itself, by `withExpandBodyBlock`.
       if (!(0, _links.isNestedHeaderLinksEnabled)(this.allowHeadingAnchorLinks)) {
         return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
           node: node

package/dist/cjs/ui/Expand.js

@@ -17,8 +17,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _expandSearchText = require("./utils/expand-search-text");
+var _expandBody = require("./expand-body");
 var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _reactIntl = require("react-intl");
 var _events = require("../analytics/events");
@@ -150,12 +149,18 @@ var contentContainerStylesNotExpanded = (0, _react.css)({
 // hidden="until-found" attribute on the outer container to hide content.
 // We remove height:0/overflow:hidden/clip from the inner wrapper so the
 // browser can actually search through the content.
+//
+// `user-select: none` must NOT be set here, unlike the variant above. WebKit scrolls to a
+// find-in-page match by selecting it, so unselectable text is matched but never revealed: the
+// reader is told there is a hit, the `hidden` attribute stays put, and the expand never opens.
+// Chrome does not need a selection, so it hid the problem. Nothing is lost by leaving it out —
+// content-visibility:hidden already makes a skipped subtree unselectable. It is only needed in the
+// other variant, where the content is merely clipped and would otherwise be selectable.
 var contentContainerStylesNotExpandedBrowserFind = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.expand-content-wrapper, .nestedExpand-content-wrapper': {
     width: '100%',
-    display: 'block',
-    userSelect: 'none'
+    display: 'block'
   }
 });
 var clearNextSiblingMarginTopStyle = (0, _react.css)({
@@ -223,6 +228,7 @@ function Expand(_ref) {
     nestedHeaderIds = _ref.nestedHeaderIds,
     rendererContentMode = _ref.rendererContentMode,
     node = _ref.node;
+  var ancestorBody = (0, _expandBody.useExpandBody)();
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     expanded = _useState2[0],
@@ -232,12 +238,11 @@ function Expand(_ref) {
     focused = _useState4[0],
     setFocused = _useState4[1];
   /**
-   * PGXT-9021: latches on the first open so the body stays mounted once rendered, including after
-   * the expand is collapsed again. Remounting it would re-run every macro and Forge data fetch
-   * inside on each reopen, which is both slower and visibly reloads content the reader has already
-   * seen. The saving this gate exists for is at initial load, where the body has never been opened,
-   * so nothing is given up by keeping it after that. Never set on the server, so the server and the
-   * client's first render agree and hydration cannot desync.
+   * PGXT-9021: once opened, the body stays rendered even if the reader closes the expand again.
+   * Throwing it away would re-run every macro and Forge fetch inside it on the next open, which is
+   * slower and visibly reloads content the reader has already seen. We only wanted to save work on
+   * the first page load, and by now that has happened. Starts false on both the server and the
+   * client, so hydration cannot disagree.
    */
   var _useState5 = (0, _react2.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -261,15 +266,21 @@ function Expand(_ref) {
     setExpanded(true);
     setHasBeenExpanded(true);
   }, []);
+  // The browser found the text inside this expand. Opening this one is not enough: if it sits
+  // inside other expands, those have to open too or the reader still cannot see it. Each expand
+  // asks the one above it, so a single match opens the whole chain and nothing else.
+  var openWithAncestors = (0, _react2.useCallback)(function () {
+    openBody();
+    ancestorBody === null || ancestorBody === void 0 || ancestorBody.openWithAncestors();
+  }, [ancestorBody, openBody]);
 
-  // Feature-detect hidden="until-found" support via the beforematch event.
-  // Chrome 102+ and Firefox 130+ support it; Safari does not yet.
-  // In unsupported browsers, setting hidden="until-found" is treated as boolean hidden
-  // (display:none), which would break the expand entirely.
-  // Initialised as false and set in useEffect to avoid SSR/client hydration mismatch —
-  // useMemo would return true on the client's first render in supported browsers,
-  // differing from the server snapshot which always produces false.
-  var _useState7 = (0, _react2.useState)(false),
+  // Feature-detect hidden="until-found" support via the beforematch event. Chrome 102+,
+  // Firefox 139+ and Safari 26.2+ all have it; in a browser without it, hidden="until-found" is
+  // treated as plain boolean hidden (display:none), which would break the expand entirely.
+  // Starts as `undefined`, meaning "we do not know yet", and is only answered in an effect. We
+  // cannot check during render: the server has no browser to check, so it would say no there and
+  // yes on the client, and hydration would disagree.
+  var _useState7 = (0, _react2.useState)(undefined),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     supportsHiddenUntilFound = _useState8[0],
     setSupportsHiddenUntilFound = _useState8[1];
@@ -286,9 +297,9 @@ function Expand(_ref) {
   // because visibility:hidden blocks browser find. On expanded, we restore visibility to visible.
   //
   // Only applied when the browser supports hidden="until-found" (detected via onbeforematch).
-  // In unsupported browsers (Safari), we skip this entirely and fall back to the normal
-  // CSS hiding (visibility:hidden + height:0), which doesn't support find-in-page but
-  // still works correctly for expand/collapse.
+  // Without it we skip this entirely and fall back to the normal CSS hiding
+  // (visibility:hidden + height:0), which doesn't support find-in-page but still works
+  // correctly for expand/collapse.
   (0, _react2.useEffect)(function () {
     var contentContainer = contentContainerRef.current;
     var contentWrapper = contentWrapperRef.current;
@@ -297,6 +308,13 @@ function Expand(_ref) {
     }
     if (supportsHiddenUntilFound && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_close_expand_find') && !expanded) {
       contentWrapper.setAttribute('hidden', 'until-found');
+      // Products ship a CSS reset with `[hidden] { display: none }` — Confluence does. That is an
+      // author rule, so it beats the UA stylesheet's
+      // `[hidden="until-found"] { content-visibility: hidden }` and takes the content out of the
+      // page altogether, where find cannot reach it. Setting display next to the attribute keeps
+      // the two together, rather than relying on a class selector elsewhere out-weighing a reset
+      // we do not own.
+      contentWrapper.style.display = 'block';
       // Override the CSS visibility:hidden from contentContainerStyles — hidden="until-found"
       // now handles hiding via content-visibility:hidden, which allows browser find to index
       // the content. We use 'visible' (not '') because '' only clears the inline style but
@@ -305,6 +323,7 @@ function Expand(_ref) {
       contentWrapper.style.visibility = 'visible';
     } else {
       contentWrapper.removeAttribute('hidden');
+      contentWrapper.style.display = '';
       contentContainer === null || contentContainer === void 0 || contentContainer.style.removeProperty('visibility');
       contentWrapper.style.visibility = '';
     }
@@ -316,22 +335,28 @@ function Expand(_ref) {
     var contentWrapper = contentWrapperRef.current;
     var unbindWrapperBeforeMatch = contentWrapper && supportsHiddenUntilFound ? (0, _bindEventListener.bind)(contentWrapper, {
       type: 'beforematch',
-      listener: openBody
+      listener: openWithAncestors
     }) : undefined;
     return function () {
       unbindWrapperBeforeMatch === null || unbindWrapperBeforeMatch === void 0 || unbindWrapperBeforeMatch();
     };
-  }, [expanded, openBody, supportsHiddenUntilFound]);
+  }, [expanded, openWithAncestors, supportsHiddenUntilFound]);
 
-  // Until the expand is first opened, stand in a plain-text mirror of the body so
-  // hidden="until-found" keeps the content findable by browser find without mounting the real
-  // subtree. The beforematch listener above expands before the browser scrolls to its match.
-  // Computed lazily: a nested expand is not mounted until its ancestor opens, so its mirror is
-  // never built on initial load.
-  var searchText = (0, _react2.useMemo)(function () {
-    return node && (0, _fg.fg)('hot-121622_lazy_load_expand_content') ? (0, _expandSearchText.getExpandSearchText)(node) : undefined;
-  }, [node]);
-  var expandContent = searchText && !expanded && !hasBeenExpanded ? (0, _react.jsx)("span", null, searchText) : children;
+  // While this is false, the blocks of the body show their text instead of rendering. It is true
+  // when:
+  // - the expand is open, or has been opened before, so the reader wants to see the content;
+  // - no node was given, so this expand never opted into lazy loading;
+  // - the experiment is off;
+  // - the browser has no hidden="until-found", so the text would not be findable and standing it in
+  //   would gain nothing. While we still do not know, we assume the browser has it — assuming the
+  //   opposite would render the whole body on the first paint and lose the saving entirely.
+  var revealed = expanded || hasBeenExpanded || !node || supportsHiddenUntilFound === false || !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_defer_collapsed_expand_body');
+  var expandBody = (0, _react2.useMemo)(function () {
+    return {
+      revealed: revealed,
+      openWithAncestors: openWithAncestors
+    };
+  }, [revealed, openWithAncestors]);
   return (0, _react.jsx)(Container, {
     "data-testid": "expand-container-".concat(nodeType, "-").concat(id),
     "data-node-type": nodeType,
@@ -396,7 +421,9 @@ function Expand(_ref) {
     ref: contentWrapperRef
   }, (0, _react.jsx)(_ui.WidthProvider, null, (0, _react.jsx)("div", {
     css: clearNextSiblingMarginTopStyle
-  }), expandContent))));
+  }), (0, _react.jsx)(_expandBody.ExpandBodyProvider, {
+    value: expandBody
+  }, children)))));
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types

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

@@ -74,7 +74,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "137.1.5";
+var packageVersion = "137.1.6";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/cjs/ui/expand-body.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withExpandBodyBlock = exports.useExpandBody = exports.mergeExpandBodyText = exports.ExpandBodyProvider = exports.ExpandBodyBlock = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _expandSearchText = require("./utils/expand-search-text");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ExpandBodyContext = /*#__PURE__*/(0, _react.createContext)(null);
+var ExpandBodyProvider = exports.ExpandBodyProvider = ExpandBodyContext.Provider;
+var useExpandBody = exports.useExpandBody = function useExpandBody() {
+  return (0, _react.useContext)(ExpandBodyContext);
+};
+/**
+ * One or more neighbouring blocks of an expand's body. Shows their text until the expand is
+ * opened, then renders them. Falls back to rendering if there is no text, or if there is no
+ * expand above it.
+ *
+ * The text is rendered as-is, with no element around it. Nothing reads it but browser find,
+ * which only needs the characters to be in the DOM.
+ */
+var ExpandBodyBlock = exports.ExpandBodyBlock = function ExpandBodyBlock(_ref) {
+  var children = _ref.children,
+    searchText = _ref.searchText;
+  var body = useExpandBody();
+  if (searchText === undefined || body === null || body.revealed) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+  return searchText;
+};
+
+/**
+ * Called for every node the serializer renders. If the node is a block of an expand's body,
+ * wraps it so it can show its text instead of rendering while that expand is collapsed.
+ * Everything else is returned untouched.
+ *
+ * A block holding an expand of its own is also returned untouched, so a table with a nested
+ * expand in it, or an extension holding stashed ADF, renders even while collapsed. That
+ * expand needs an element of its own, because the element browser find reveals is the only
+ * way we learn the match was inside it rather than higher up. We give up the saving on those
+ * blocks so the reader searches once instead of once per level.
+ *
+ * `ancestors` is the node's ancestor chain, nearest last.
+ */
+var withExpandBodyBlock = exports.withExpandBodyBlock = function withExpandBodyBlock(node, ancestors, index, serialized) {
+  var parent = ancestors[ancestors.length - 1];
+  if (!parent || !(0, _expandSearchText.isExpandNode)(parent)) {
+    return serialized;
+  }
+  if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_defer_collapsed_expand_body') || (0, _expandSearchText.holdsRevealableContent)(node)) {
+    return serialized;
+  }
+  var searchText = (0, _expandSearchText.getBlockSearchText)(node);
+  if (searchText === undefined) {
+    return serialized;
+  }
+  return /*#__PURE__*/_react.default.createElement(ExpandBodyBlock, {
+    key: "expand-body-block-".concat(index),
+    searchText: searchText
+  }, serialized);
+};
+
+/** Whatever the serializer produced for one child: an element, a string, an array of either. */
+
+var searchTextOf = function searchTextOf(child) {
+  return /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === ExpandBodyBlock ? child.props.searchText : undefined;
+};
+
+/**
+ * Joins neighbouring blocks that are showing text into one, so a run of them is a single string in
+ * the DOM rather than one per block. A body of twenty paragraphs becomes one text node instead of
+ * twenty.
+ *
+ * A block that is being rendered — a nested expand, say — ends the run, because the text either
+ * side of it has to stay either side of it.
+ */
+var mergeExpandBodyText = exports.mergeExpandBodyText = function mergeExpandBodyText(children) {
+  // Called for every fragment in the document, and only an expand's body has anything to merge, so
+  // leave the array alone unless two neighbours are actually showing text.
+  var hasRun = children.some(function (child, index) {
+    return index > 0 && searchTextOf(child) !== undefined && searchTextOf(children[index - 1]) !== undefined;
+  });
+  if (!hasRun) {
+    return children;
+  }
+  var merged = [];
+  var run = [];
+  var endRun = function endRun() {
+    if (run.length === 0) {
+      return;
+    }
+    if (run.length === 1) {
+      merged.push(run[0]);
+    } else {
+      var _key;
+      var text = run.map(searchTextOf).filter(Boolean).join(_expandSearchText.BLOCK_SEPARATOR);
+      // The blocks themselves, not the wrappers around them: nesting the wrappers would show
+      // each block's text again inside the joined run.
+      var blocks = run.map(function (child) {
+        return child.props.children;
+      });
+      merged.push( /*#__PURE__*/_react.default.createElement(ExpandBodyBlock, {
+        key: (_key = run[0].key) !== null && _key !== void 0 ? _key : undefined,
+        searchText: text
+      }, blocks));
+    }
+    run = [];
+  };
+  children.forEach(function (child) {
+    if (searchTextOf(child) === undefined) {
+      endRun();
+      merged.push(child);
+      return;
+    }
+    run.push(child);
+  });
+  endRun();
+  return merged;
+};

package/dist/cjs/ui/utils/expand-search-text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getExpandSearchText = void 0;
+exports.isExpandNode = exports.holdsRevealableContent = exports.getBlockSearchText = exports.BLOCK_SEPARATOR = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 /**
  * Minimal structural view of an ADF entity. `parameters.nestedContent` holds raw ADF JSON rather
@@ -11,22 +11,29 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
  */
 
 /** Separates text from adjacent blocks so phrases cannot fuse across block boundaries. */
-var BLOCK_SEPARATOR = ' ';
+var BLOCK_SEPARATOR = exports.BLOCK_SEPARATOR = ' ';
 var asText = function asText(value) {
   return typeof value === 'string' ? value : '';
 };
+var nestedContentOf = function nestedContentOf(attrs) {
+  var _attrs$parameters;
+  return attrs === null || attrs === void 0 || (_attrs$parameters = attrs.parameters) === null || _attrs$parameters === void 0 ? void 0 : _attrs$parameters.nestedContent;
+};
+var isExpandNode = exports.isExpandNode = function isExpandNode(node) {
+  return node.type.name === 'expand' || node.type.name === 'nestedExpand';
+};
 
 /**
- * Extracts text from raw ADF JSON.
+ * Reads the text out of raw ADF JSON.
  *
- * Needed because some extensions stash a whole ADF subtree in `attrs.parameters.nestedContent`
- * instead of in their node content — Confluence does this when it coerces nesting the schema
- * cannot represent (an expand more than two collapsible layers deep, say). Such a node is a
- * ProseMirror leaf, so the model walk cannot see the subtree even though it renders on the page
- * via a nested renderer. Recurses, because nestedContent routinely holds further nested content.
+ * Some extensions keep a whole ADF subtree in `attrs.parameters.nestedContent` rather than in their
+ * node content. Confluence does this when the authored nesting is deeper than the schema allows —
+ * an expand more than two collapsible layers deep, for example. To ProseMirror the extension is a
+ * leaf, so walking the node tree never sees that subtree, even though a nested renderer puts it on
+ * the page. Recurses, because stashed content often stashes more content of its own.
  */
 var _adfEntityText = function adfEntityText(entity) {
-  var _entity$attrs, _entity$content;
+  var _entity$content;
   if (!entity) {
     return '';
   }
@@ -34,13 +41,13 @@ var _adfEntityText = function adfEntityText(entity) {
   if (entity.type === 'text') {
     parts.push(asText(entity.text));
   }
-  var nestedContent = (_entity$attrs = entity.attrs) === null || _entity$attrs === void 0 || (_entity$attrs = _entity$attrs.parameters) === null || _entity$attrs === void 0 ? void 0 : _entity$attrs.nestedContent;
+  var nestedContent = nestedContentOf(entity.attrs);
   if (nestedContent) {
     // Prefer the real subtree over `attrs.text`, which is only a placeholder label for it.
     parts.push(_adfEntityText(nestedContent));
   } else {
-    var _entity$attrs2;
-    parts.push(asText((_entity$attrs2 = entity.attrs) === null || _entity$attrs2 === void 0 ? void 0 : _entity$attrs2.text));
+    var _entity$attrs;
+    parts.push(asText((_entity$attrs = entity.attrs) === null || _entity$attrs === void 0 ? void 0 : _entity$attrs.text));
   }
   (_entity$content = entity.content) === null || _entity$content === void 0 || _entity$content.forEach(function (child) {
     return parts.push(_adfEntityText(child));
@@ -49,16 +56,48 @@ var _adfEntityText = function adfEntityText(entity) {
 };
 
 /**
- * `textBetween` drops every non-text leaf unless the node spec declares `leafText`, and no ADF
- * node does. Leaves carry their visible text in attrs, so recover it here.
+ * `textBetween` skips every leaf node unless its spec declares `leafText`, and no ADF node
+ * does — so mentions, emoji, dates and statuses would all be lost. They keep their visible
+ * text in attrs, so read it from there.
  */
 var leafText = function leafText(leaf) {
-  var _leaf$attrs, _leaf$attrs2;
-  var nestedContent = (_leaf$attrs = leaf.attrs) === null || _leaf$attrs === void 0 || (_leaf$attrs = _leaf$attrs.parameters) === null || _leaf$attrs === void 0 ? void 0 : _leaf$attrs.nestedContent;
+  var _leaf$attrs;
+  var nestedContent = nestedContentOf(leaf.attrs);
   if (nestedContent) {
     return _adfEntityText(nestedContent);
   }
-  return asText((_leaf$attrs2 = leaf.attrs) === null || _leaf$attrs2 === void 0 ? void 0 : _leaf$attrs2.text);
+  return asText((_leaf$attrs = leaf.attrs) === null || _leaf$attrs === void 0 ? void 0 : _leaf$attrs.text);
+};
+var isRevealable = function isRevealable(node) {
+  return isExpandNode(node) || Boolean(nestedContentOf(node.attrs));
+};
+var revealableCache = new WeakMap();
+
+/**
+ * Whether this block holds something that can be opened on its own: an expand, or an extension
+ * holding stashed ADF that a nested renderer will mount expands from.
+ *
+ * Those need a real element even while the expand around them is collapsed. The element is how we
+ * know find matched inside them rather than higher up: the beforematch event says nothing about
+ * where the match was, so the element the browser chose to reveal is the only clue.
+ */
+var holdsRevealableContent = exports.holdsRevealableContent = function holdsRevealableContent(node) {
+  var cached = revealableCache.get(node);
+  if (cached !== undefined) {
+    return cached;
+  }
+  var found = isRevealable(node);
+  if (!found) {
+    node.descendants(function (descendant) {
+      if (found) {
+        return false;
+      }
+      found = isRevealable(descendant);
+      return !found;
+    });
+  }
+  revealableCache.set(node, found);
+  return found;
 };
 var hasInlineComment = function hasInlineComment(node) {
   return (0, _utils.findChildrenByMark)(node, node.type.schema.marks.annotation, true).some(function (annotation) {
@@ -68,30 +107,31 @@ var hasInlineComment = function hasInlineComment(node) {
   });
 };
 
-/** `null` is a cached "no mirror for this node", as distinct from `undefined` for a cache miss. */
+/** `null` is a cached "no search text for this node", as distinct from `undefined` for a miss. */
 var searchTextCache = new WeakMap();
 
 /**
- * Plain-text mirror of an expand's body, rendered in its place while collapsed so browser
- * find-in-page can still reach the content.
+ * The text shown in place of one block of a collapsed expand's body, so browser find can still
+ * reach the content without the block being rendered.
  *
- * Cached on the node. ProseMirror nodes are immutable and `render-document` memoises
- * `nodeFromJSON`, so the same node instance is reused across renders — including across the
- * serializer rebuilds that invalidate the module-level `memoizeOne` caches.
+ * Cached on the node. ProseMirror nodes never change, and the serializer reuses the same instances
+ * across renders, so the text only has to be worked out once per block.
  *
- * @returns the mirror text, or `undefined` if this expand must keep its body rendered.
+ * @returns the text, or `undefined` if this block has to be rendered instead.
  */
-var getExpandSearchText = exports.getExpandSearchText = function getExpandSearchText(node) {
+var getBlockSearchText = exports.getBlockSearchText = function getBlockSearchText(node) {
   var cached = searchTextCache.get(node);
   if (cached === undefined) {
     cached = hasInlineComment(node) ?
-    // Withhold the mirror, which makes Expand keep rendering `children`. Comment
-    // navigation walks the DOM to find the annotated node and scrolls it into view, so
-    // the annotation has to exist as a real element — a flat text mirror carries no
-    // annotation marks and cannot stand in for it. Without this, stepping through
-    // comments with the arrow keys silently fails to reach any comment inside a
-    // collapsed expand. Costs the lazy-load win for these expands, deliberately.
-    null : node.textBetween(0, node.content.size, BLOCK_SEPARATOR, leafText);
+    // No text, which makes the block render instead. Comment navigation looks through the DOM
+    // for the commented text and scrolls to it, so that text has to be a real element —
+    // plain text carries no comment marks and cannot stand in for it. Without this, the
+    // arrow keys silently skip every comment inside a collapsed expand. We give up the
+    // saving for this block on purpose.
+    null :
+    // A leaf block is not inside its own range, so `textBetween` would return nothing and its
+    // text would be lost — a macro sitting straight in an expand body, for instance.
+    node.isLeaf ? leafText(node) : node.textBetween(0, node.content.size, BLOCK_SEPARATOR, leafText);
     searchTextCache.set(node, cached);
   }
   return cached !== null && cached !== void 0 ? cached : undefined;

package/dist/es2019/react/index.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { mergeExpandBodyText, withExpandBodyBlock } from '../ui/expand-body';
 import { Doc, DocWithSelectAllTrap, isTextNode, isTextWrapper, mergeTextNodes, toReact } from './nodes';
 import TextWrapperComponent from './nodes/text-wrapper';
 import { isNestedHeaderLinksEnabled } from './utils/links';
@@ -80,12 +81,13 @@ export default class ReactSerializer {
         return ((_n$type = n.type) === null || _n$type === void 0 ? void 0 : _n$type.name) !== 'mediaSingle';
       }) && isMedia && mark.type.name === 'border';
       const shouldSkipLinkMark = mark => this.allowMediaLinking !== true && isMedia && mark.type.name === 'link';
-      return marks.reduceRight((content, mark) => {
+      const serialized = marks.reduceRight((content, mark) => {
         if (shouldSkipLinkMark(mark) || shouldSkipBorderMark(mark)) {
           return content;
         }
         return this.renderMark(markToReact(mark), this.withMediaMarkProps(node, mark, this.getMarkProps(mark, [], node)), `${mark.type.name}-${index}`, content);
       }, serializedContent);
+      return withExpandBodyBlock(node, currentPath, index, serialized);
     });
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -266,7 +268,7 @@ export default class ReactSerializer {
       case 'expand':
         return this.getExpandProps(node, path);
       case 'nestedExpand':
-        if (fg('hot-121622_lazy_load_expand_content')) {
+        if (isExperimentEnabled('platform_editor_defer_collapsed_expand_body')) {
           return this.getExpandProps(node, path);
         }
         return this.getProps(node, path);
@@ -297,7 +299,7 @@ export default class ReactSerializer {
     if (key === 'root-0') {
       this.resetState();
     }
-    return this.renderNode(target, props, key, this.getChildNodes(fragment).map((node, index) => {
+    return this.renderNode(target, props, key, mergeExpandBodyText(this.getChildNodes(fragment).map((node, index) => {
       if (isTextWrapper(node)) {
         return this.serializeTextWrapper(node.content, {
           index,
@@ -308,7 +310,7 @@ export default class ReactSerializer {
         index,
         parentInfo
       });
-    }));
+    })));
   }
   serializeTextWrapper(content, {
     parentInfo
@@ -655,11 +657,8 @@ export default class ReactSerializer {
     };
   }
   getExpandProps(node, _path = []) {
-    // Expand receives the node rather than a precomputed string so it can derive the collapsed
-    // text mirror only when it actually renders one — a nested expand is not mounted until its
-    // ancestor opens — and so that derivation can reach content the model walk cannot, such as
-    // the ADF stashed in a coerced extension's `parameters.nestedContent`. Expand owns the
-    // feature gate check.
+    // Expand is given the node so it can tell whether it opted into lazy body loading at all. The
+    // text each block shows is attached to the block itself, by `withExpandBodyBlock`.
     if (!isNestedHeaderLinksEnabled(this.allowHeadingAnchorLinks)) {
       return {
         ...this.getProps(node),