@atlaskit/renderer 137.1.2 → 137.1.4

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @atlaskit/renderer
 
+## 137.1.4
+
+### Patch Changes
+
+- [`53ad40b08a887`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/53ad40b08a887) -
+  Clean up platform_editor_video_caption_commit
+- [`ad40c91e7c746`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad40c91e7c746) -
+  Rework lazy loading of Expand body content behind the `hot-121622_lazy_load_expand_content`
+  feature gate, fixing an SSR hydration failure. Bodies were previously wrapped in `Suspense` +
+  `React.lazy`, which `renderToString` cannot resolve — it emitted an errored Suspense boundary and
+  hydration failed with "The server did not finish this Suspense boundary". That wrapper provided no
+  code splitting and has been removed.
+
+  A collapsed expand now renders a plain-text mirror of its body, and mounts the real children on
+  expand or on the browser's `beforematch` event. `Expand` takes the expand's ProseMirror `node` and
+  derives that mirror itself, replacing the `loadBodyContent` and `searchText` props. Deriving it in
+  the component means a nested expand — which is not mounted until its ancestor opens — never builds
+  a mirror on initial load, and the result is cached per node.
+
+  The mirror also now covers text the previous `node.textContent` call could not see: leaf nodes
+  that carry their text in attrs (mentions, emoji, status), text separated across block boundaries,
+  and ADF stashed in a coerced extension's `parameters.nestedContent` — which is how Confluence
+  stores nesting the schema cannot represent, and which renders on the page via a nested renderer.
+
+  Once an expand has been opened its children stay mounted, including after it is collapsed again
+  (PGXT-9021). Remounting them would re-run every macro and Forge data fetch inside the body on each
+  reopen; the saving this gate exists for is at initial load, where the body has never been opened.
+
+- Updated dependencies
+
+## 137.1.3
+
+### Patch Changes
+
+- [`28054f27e1549`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28054f27e1549) -
+  Support inline-bodied Forge macros in view mode, behind `platform_forge_inline_bodied_macro`.
+
+  A macro with a rich body must declare `layout: bodied`, and `layout` is a single enum, so it
+  cannot also express "inline". Such a macro now declares display intent separately with
+  `outputType: inline`. The stored node remains a block `bodiedExtension` — only its presentation
+  changes, and only in view mode; the editor still shows a block.
+
+  `@atlassian/forge-ui-types`: adds `properties.outputType?: 'inline' | 'block'`.
+
+  `@atlassian/xen-editor-provider`: when a macro declares `layout: bodied` + `outputType: inline`,
+  the output type is seeded into `guestParams` at insert so the renderer's inline treatment applies
+  from the first render with no config edit, and it is re-applied as a default when a config panel
+  saves (config saves replace `guestParams` wholesale). The Forge app container is laid out inline
+  for these macros in view mode, Custom UI excluded.
+
+  `@atlaskit/renderer`: native Forge inline extensions are marked with `data-forge-inline` and their
+  nested body renderer's top-level paragraphs are collapsed inline, so the app's own block spacing
+  does not push the surrounding sentence away. Nested inline-bodied Forge macros are left as blocks,
+  because the pass that marks the sibling textblocks around an inline extension only resolves
+  positions correctly at the top level.
+
+  With the gate disabled every code path above evaluates to today's behaviour.
+
+- Updated dependencies
+
 ## 137.1.2
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -736,25 +736,14 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     value: function getExpandProps(node) {
       var _this7 = this;
       var _path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var loadBodyContent = false;
-      if ((0, _fg.fg)('hot-121622_lazy_load_expand_content')) {
-        var annotations = (0, _utils2.findChildrenByMark)(node, node.type.schema.marks.annotation, true);
-        // Force rendering children if there are inline comments to support comments navigation
-        // which relies on the HTML node to be present.
-        loadBodyContent = annotations.some(function (annotation) {
-          return annotation.node.marks.some(function (mark) {
-            return mark.attrs.annotationType === 'inlineComment';
-          });
-        });
-      }
-
-      // Only compute searchText when the browser find experiment is enabled,
-      // to avoid unnecessary node.textContent string allocations per expand node.
-      var searchText = (0, _expValEquals.expValEquals)('platform_editor_close_expand_find', 'isEnabled', true) ? node.textContent : undefined;
+      // 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.
       if (!(0, _links.isNestedHeaderLinksEnabled)(this.allowHeadingAnchorLinks)) {
         return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-          loadBodyContent: loadBodyContent,
-          searchText: searchText
+          node: node
         });
       }
       var nestedHeaderIds = (0, _utils2.findChildrenByType)(node, node.type.schema.nodes.heading).map(function (_ref4) {
@@ -763,8 +752,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       });
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         nestedHeaderIds: nestedHeaderIds,
-        loadBodyContent: loadBodyContent,
-        searchText: searchText
+        node: node
       });
     }
 

package/dist/cjs/react/nodes/extension.js

@@ -26,6 +26,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var FORGE_EXTENSION_TYPE = 'com.atlassian.ecosystem';
+/**
+ * Mirrors `FORGE_INLINE_BODIED_PARAM` in `@atlassian/xen-editor-provider`. Duplicated rather than
+ * imported: the renderer must not depend on a Forge package, and this is a stored parameter name,
+ * so it is part of the document contract rather than that package's API.
+ */
+var FORGE_INLINE_BODIED_PARAM = 'atlassianForgeInlineBodied';
 var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 var macroHeights = {
@@ -73,6 +80,7 @@ var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_re
   return null;
 };
 var renderExtension = exports.renderExtension = function renderExtension(content, layout) {
+  var _node$parameters;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
   var extensionId = arguments.length > 4 ? arguments[4] : undefined;
@@ -105,8 +113,36 @@ var renderExtension = exports.renderExtension = function renderExtension(content
    */
   var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   var extensionHeight = nodeHeight || viewportSize;
-  var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
+  /**
+   * Scoped to nodes inserted by an app declaring `outputType: inline`, which is what writes
+   * `atlassianForgeInlineBodied`. The output-type marker alone would also match migrated Connect
+   * content — it carries the same marker, and after an upgrade plus a storage round trip in the
+   * same shape — so keying on it would change how existing content renders. The renderer only
+   * ever sees the stored node, never the manifest, so a parameter this code writes is the only
+   * available signal.
+   *
+   * Evaluated once and shared with `isNativeForgeInline` below, so the gate is read a single time
+   * per render, and the cheap checks stay in front of it so anything ineligible short-circuits
+   * without firing an exposure it can never act on.
+   */
+  var isForgeInlineBodiedEnabled = Boolean((node === null || node === void 0 ? void 0 : node.extensionType) === FORGE_EXTENSION_TYPE && (node === null || node === void 0 ? void 0 : node.content) && (node === null || node === void 0 || (_node$parameters = node.parameters) === null || _node$parameters === void 0 || (_node$parameters = _node$parameters.guestParams) === null || _node$parameters === void 0 ? void 0 : _node$parameters[FORGE_INLINE_BODIED_PARAM]) === 'true' && (0, _fg.fg)('platform_forge_inline_bodied_macro'));
+  /**
+   * The pass that marks the sibling textblocks around an inline extension resolves their
+   * positions without a depth term, so it only ever matches at the top level. Inlining a nested
+   * container without joining its neighbours leaves a shrink-wrapped box alone on its own line,
+   * which is worse than leaving it a block — so keep nested inline-bodied Forge macros as
+   * blocks until the sibling marking works at depth.
+   */
+  var isNestedForgeInlineBodied = !isTopLevel && isForgeInlineBodiedEnabled;
+  var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && !isNestedForgeInlineBodied;
   var inlineClassName = isInline ? _consts.RendererCssClassName.EXTENSION_AS_INLINE : '';
+  /**
+   * A native Forge macro does not have its body rendered by the product — the body ADF is
+   * sent to the app over the bridge and the app renders it with its own nested renderer.
+   * The inline styling above stops at the outer wrapper, so mark these nodes to let the
+   * nested document's block spacing be collapsed too.
+   */
+  var isNativeForgeInline = Boolean(isInline && isForgeInlineBodiedEnabled);
   var asInlineAnalytics = isInline && fireAnalyticsEvent && node ? (0, _react.jsx)(FireExtensionAsInlineAnalytics, {
     fireAnalyticsEvent: fireAnalyticsEvent,
     node: node
@@ -128,7 +164,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       "data-local-id": localId,
       "data-testid": "extension--wrapper",
       "data-node-type": "extension",
-      "data-top-level": isTopLevel || undefined
+      "data-top-level": isTopLevel || undefined,
+      "data-forge-inline": isNativeForgeInline || undefined
     }, (0, _react.jsx)("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -158,7 +195,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       },
       "data-layout": layout,
       "data-local-id": localId,
-      "data-top-level": isTopLevel || undefined
+      "data-top-level": isTopLevel || undefined,
+      "data-forge-inline": isNativeForgeInline || undefined
     }, (0, _react.jsx)("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/cjs/react/utils/EditorMediaClientProvider.js

@@ -16,7 +16,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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 getMediaClientConfigForRenderer = function getMediaClientConfigForRenderer(provider) {
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  return provider.viewAndUploadMediaClientConfig && (0, _fg.fg)('platform_media_video_captions') && (0, _fg.fg)('platform_editor_video_caption_commit') ? provider.viewAndUploadMediaClientConfig : provider.viewMediaClientConfig;
+  return provider.viewAndUploadMediaClientConfig && (0, _fg.fg)('platform_media_video_captions') ? provider.viewAndUploadMediaClientConfig : provider.viewMediaClientConfig;
 };
 var EditorMediaClientProvider = exports.EditorMediaClientProvider = function EditorMediaClientProvider(_ref) {
   var children = _ref.children,

package/dist/cjs/ui/Expand.js

@@ -16,8 +16,9 @@ var _ui = require("@atlaskit/editor-common/ui");
 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 _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expandSearchText = require("./utils/expand-search-text");
 var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _reactIntl = require("react-intl");
 var _events = require("../analytics/events");
@@ -164,16 +165,6 @@ var clearNextSiblingMarginTopStyle = (0, _react.css)({
     marginTop: '0 !important'
   }
 });
-
-// Lazy-loaded children component
-var LazyChildren = /*#__PURE__*/(0, _react2.lazy)(function () {
-  return Promise.resolve({
-    default: function _default(_ref) {
-      var children = _ref.children;
-      return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, children);
-    }
-  });
-});
 var Container = function Container(props) {
   return (0, _react.jsx)("div", {
     css: [containerStyles, props['data-node-type'] === 'expand' && containerStylesDataNodeTypeExpand, props.expanded && containerStylesExpanded, props.focused && containerStylesFocused],
@@ -222,29 +213,36 @@ function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
     eventType: _analytics.EVENT_TYPE.TRACK
   });
 }
-function Expand(_ref2) {
-  var title = _ref2.title,
-    children = _ref2.children,
-    nodeType = _ref2.nodeType,
-    intl = _ref2.intl,
-    fireAnalyticsEvent = _ref2.fireAnalyticsEvent,
-    localId = _ref2.localId,
-    nestedHeaderIds = _ref2.nestedHeaderIds,
-    rendererContentMode = _ref2.rendererContentMode,
-    loadBodyContent = _ref2.loadBodyContent,
-    searchText = _ref2.searchText;
-  var _React$useState = _react2.default.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    expanded = _React$useState2[0],
-    setExpanded = _React$useState2[1];
-  var _React$useState3 = _react2.default.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    focused = _React$useState4[0],
-    setFocused = _React$useState4[1];
-  var _React$useState5 = _react2.default.useState(false),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    hasLoadedChildren = _React$useState6[0],
-    setHasLoadedChildren = _React$useState6[1];
+function Expand(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    nodeType = _ref.nodeType,
+    intl = _ref.intl,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    localId = _ref.localId,
+    nestedHeaderIds = _ref.nestedHeaderIds,
+    rendererContentMode = _ref.rendererContentMode,
+    node = _ref.node;
+  var _useState = (0, _react2.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useState3 = (0, _react2.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    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.
+   */
+  var _useState5 = (0, _react2.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    hasBeenExpanded = _useState6[0],
+    setHasBeenExpanded = _useState6[1];
   var isMobile = false;
   var label = intl.formatMessage(expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode);
   var _useRef = (0, _react2.useRef)((0, _uniqueId2.default)('expand-title-')),
@@ -257,16 +255,12 @@ function Expand(_ref2) {
   var handleBlur = (0, _react2.useCallback)(function () {
     return setFocused(false);
   }, []);
-  var expandForBrowserFind = (0, _react2.useCallback)(function () {
-    setHasLoadedChildren(true);
+  // Both state updates happen in the same handler so they land in one render, rather than the
+  // latch reacting to `expanded` from an effect.
+  var openBody = (0, _react2.useCallback)(function () {
     setExpanded(true);
+    setHasBeenExpanded(true);
   }, []);
-  var shouldRenderLazyChildren = hasLoadedChildren || loadBodyContent;
-  // Only render the lightweight text placeholder when lazy load is ON and
-  // children haven't been loaded yet. When lazy load is OFF, children are
-  // always in the DOM — hidden="until-found" on the wrapper already makes
-  // them searchable by browser find, so no placeholder is needed.
-  var shouldRenderBrowserFindText = !shouldRenderLazyChildren && searchText && (0, _fg.fg)('hot-121622_lazy_load_expand_content') && (0, _expValEquals.expValEquals)('platform_editor_close_expand_find', 'isEnabled', true);
 
   // Feature-detect hidden="until-found" support via the beforematch event.
   // Chrome 102+ and Firefox 130+ support it; Safari does not yet.
@@ -275,11 +269,11 @@ function Expand(_ref2) {
   // 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 _React$useState7 = _react2.default.useState(false),
-    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-    supportsHiddenUntilFound = _React$useState8[0],
-    setSupportsHiddenUntilFound = _React$useState8[1];
-  _react2.default.useEffect(function () {
+  var _useState7 = (0, _react2.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    supportsHiddenUntilFound = _useState8[0],
+    setSupportsHiddenUntilFound = _useState8[1];
+  (0, _react2.useEffect)(function () {
     var doc = (0, _browserApis.getDocument)();
     setSupportsHiddenUntilFound(doc !== null && doc !== void 0 && doc.body ? 'onbeforematch' in doc.body : false);
   }, []);
@@ -295,13 +289,13 @@ function Expand(_ref2) {
   // 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.
-  _react2.default.useEffect(function () {
+  (0, _react2.useEffect)(function () {
     var contentContainer = contentContainerRef.current;
     var contentWrapper = contentWrapperRef.current;
     if (!contentWrapper) {
       return;
     }
-    if (supportsHiddenUntilFound && (0, _expValEquals.expValEquals)('platform_editor_close_expand_find', 'isEnabled', true) && !expanded) {
+    if (supportsHiddenUntilFound && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_close_expand_find') && !expanded) {
       contentWrapper.setAttribute('hidden', 'until-found');
       // Override the CSS visibility:hidden from contentContainerStyles — hidden="until-found"
       // now handles hiding via content-visibility:hidden, which allows browser find to index
@@ -315,31 +309,29 @@ function Expand(_ref2) {
       contentWrapper.style.visibility = '';
     }
   }, [expanded, supportsHiddenUntilFound]);
-  _react2.default.useEffect(function () {
-    if (!(0, _expValEquals.expValEquals)('platform_editor_close_expand_find', 'isEnabled', true) || expanded) {
+  (0, _react2.useEffect)(function () {
+    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_close_expand_find') || expanded) {
       return;
     }
     var contentWrapper = contentWrapperRef.current;
     var unbindWrapperBeforeMatch = contentWrapper && supportsHiddenUntilFound ? (0, _bindEventListener.bind)(contentWrapper, {
       type: 'beforematch',
-      listener: expandForBrowserFind
+      listener: openBody
     }) : undefined;
     return function () {
       unbindWrapperBeforeMatch === null || unbindWrapperBeforeMatch === void 0 || unbindWrapperBeforeMatch();
     };
-  }, [expandForBrowserFind, expanded, supportsHiddenUntilFound]);
-  var expandContent = children;
-  if (shouldRenderBrowserFindText) {
-    // Browser find path: keep a lightweight text mirror in the closed expand
-    // so Ctrl+F can index it without mounting the rich children tree.
-    expandContent = (0, _react.jsx)("span", null, searchText);
-  } else if (!shouldRenderLazyChildren && (0, _fg.fg)('hot-121622_lazy_load_expand_content')) {
-    expandContent = null;
-  } else if ((0, _fg.fg)('hot-121622_lazy_load_expand_content')) {
-    expandContent = (0, _react.jsx)(_react2.Suspense, {
-      fallback: (0, _react.jsx)("div", null, intl.formatMessage(_ui.expandMessages.loading))
-    }, (0, _react.jsx)(LazyChildren, null, children));
-  }
+  }, [expanded, openBody, 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;
   return (0, _react.jsx)(Container, {
     "data-testid": "expand-container-".concat(nodeType, "-").concat(id),
     "data-node-type": nodeType,
@@ -349,15 +341,8 @@ function Expand(_ref2) {
     expanded: expanded,
     focused: focused
   }, nestedHeaderIds && nestedHeaderIds.length > 0 ? (0, _react.jsx)(_activeHeaderIdProvider.ActiveHeaderIdConsumer, {
-    nestedHeaderIds: nestedHeaderIds
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
-      if (!hasLoadedChildren) {
-        setHasLoadedChildren(true);
-      }
-      setExpanded(true);
-    }
+    nestedHeaderIds: nestedHeaderIds,
+    onNestedHeaderIdMatch: openBody
   }) : null, (0, _react.jsx)(TitleContainer
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , {
@@ -365,12 +350,11 @@ function Expand(_ref2) {
       e.preventDefault();
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
-
-      // Mark children as loaded when expanding for the first time
-      if (!expanded && !hasLoadedChildren) {
-        setHasLoadedChildren(true);
+      if (expanded) {
+        setExpanded(false);
+      } else {
+        openBody();
       }
-      setExpanded(!expanded);
       e.persist();
       // @ts-ignore detail doesn't exist on type
       e.detail ? handleBlur() : handleFocus();
@@ -405,7 +389,7 @@ function Expand(_ref2) {
     id: id
   }, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), (0, _react.jsx)(ContentContainer, {
     expanded: expanded,
-    enableBrowserFind: supportsHiddenUntilFound && (0, _expValEquals.expValEquals)('platform_editor_close_expand_find', 'isEnabled', true),
+    enableBrowserFind: supportsHiddenUntilFound && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_close_expand_find'),
     contentRef: contentContainerRef
   }, (0, _react.jsx)("div", {
     className: "".concat(nodeType, "-content-wrapper"),
@@ -417,4 +401,4 @@ function Expand(_ref2) {
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 var _default_1 = (0, _reactIntl.injectIntl)(Expand);
-var _default2 = exports.default = _default_1;
+var _default = exports.default = _default_1;

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

@@ -867,6 +867,20 @@ var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _
 }), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER), {
   display: 'inline-block'
 }));
+var forgeInlineBodiedSpacingStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline]"), {
+  marginBottom: 0,
+  verticalAlign: 'baseline',
+  maxWidth: '100%'
+}), [".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-forge-inline] + [data-as-inline=\"on\"]"), ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]:has(+ [data-forge-inline])")].join(', '), {
+  display: 'inline'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] *"), {
+  maxWidth: '100%'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] .").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  overflowX: 'auto'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, "[data-forge-inline] .").concat(_consts.RendererCssClassName.DOCUMENT, " > p"), {
+  display: 'inline',
+  margin: 0
+}));
 
 // Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
 var inlineExtensionRendererMarginFix = (0, _react.css)({
@@ -2293,7 +2307,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
-    (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
+    (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), forgeInlineBodiedSpacingStyle, inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
     (0, _fg.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_7') && roundedTableLegacyClipPathStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId

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.1";
+var packageVersion = "137.1.3";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getExpandSearchText = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+/**
+ * Minimal structural view of an ADF entity. `parameters.nestedContent` holds raw ADF JSON rather
+ * than ProseMirror nodes, so it cannot be walked with the model API.
+ */
+
+/** Separates text from adjacent blocks so phrases cannot fuse across block boundaries. */
+var BLOCK_SEPARATOR = ' ';
+var asText = function asText(value) {
+  return typeof value === 'string' ? value : '';
+};
+
+/**
+ * Extracts text from 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.
+ */
+var _adfEntityText = function adfEntityText(entity) {
+  var _entity$attrs, _entity$content;
+  if (!entity) {
+    return '';
+  }
+  var parts = [];
+  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;
+  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));
+  }
+  (_entity$content = entity.content) === null || _entity$content === void 0 || _entity$content.forEach(function (child) {
+    return parts.push(_adfEntityText(child));
+  });
+  return parts.filter(Boolean).join(BLOCK_SEPARATOR);
+};
+
+/**
+ * `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.
+ */
+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;
+  if (nestedContent) {
+    return _adfEntityText(nestedContent);
+  }
+  return asText((_leaf$attrs2 = leaf.attrs) === null || _leaf$attrs2 === void 0 ? void 0 : _leaf$attrs2.text);
+};
+var hasInlineComment = function hasInlineComment(node) {
+  return (0, _utils.findChildrenByMark)(node, node.type.schema.marks.annotation, true).some(function (annotation) {
+    return annotation.node.marks.some(function (mark) {
+      return mark.attrs.annotationType === 'inlineComment';
+    });
+  });
+};
+
+/** `null` is a cached "no mirror for this node", as distinct from `undefined` for a cache 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.
+ *
+ * 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.
+ *
+ * @returns the mirror text, or `undefined` if this expand must keep its body rendered.
+ */
+var getExpandSearchText = exports.getExpandSearchText = function getExpandSearchText(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);
+    searchTextCache.set(node, cached);
+  }
+  return cached !== null && cached !== void 0 ? cached : undefined;
+};

package/dist/es2019/react/index.js

@@ -9,7 +9,7 @@ import TextWrapperComponent from './nodes/text-wrapper';
 import { isNestedHeaderLinksEnabled } from './utils/links';
 import { getColumnWidths } from '@atlaskit/editor-common/utils';
 import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
-import { findChildrenByMark, findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
+import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getText } from '../utils';
@@ -655,24 +655,15 @@ export default class ReactSerializer {
     };
   }
   getExpandProps(node, _path = []) {
-    let loadBodyContent = false;
-    if (fg('hot-121622_lazy_load_expand_content')) {
-      const annotations = findChildrenByMark(node, node.type.schema.marks.annotation, true);
-      // Force rendering children if there are inline comments to support comments navigation
-      // which relies on the HTML node to be present.
-      loadBodyContent = annotations.some(annotation => {
-        return annotation.node.marks.some(mark => mark.attrs.annotationType === 'inlineComment');
-      });
-    }
-
-    // Only compute searchText when the browser find experiment is enabled,
-    // to avoid unnecessary node.textContent string allocations per expand node.
-    const searchText = expValEquals('platform_editor_close_expand_find', 'isEnabled', true) ? node.textContent : undefined;
+    // 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.
     if (!isNestedHeaderLinksEnabled(this.allowHeadingAnchorLinks)) {
       return {
         ...this.getProps(node),
-        loadBodyContent,
-        searchText
+        node
       };
     }
     const nestedHeaderIds = findChildrenByType(node, node.type.schema.nodes.heading).map(({
@@ -681,8 +672,7 @@ export default class ReactSerializer {
     return {
       ...this.getProps(node),
       nestedHeaderIds,
-      loadBodyContent,
-      searchText
+      node
     };
   }