@atlaskit/renderer 137.0.0 → 137.1.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/renderer
 
+## 137.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 137.1.0
+
+### Minor Changes
+
+- [`6b67bdd5e6a75`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6b67bdd5e6a75) -
+  Node components now receive a `getContent()` prop, which supersedes `content` and will replace it.
+  `content` is a recursive `Fragment.toJSON()` of the node's subtree, attached to every node and
+  serialized on every render whether or not anything reads it — so the document was re-serialized
+  once per ancestor node, and a table paid it again for every row and every cell. `getContent()`
+  returns the same data, computed on first call and memoized, and is present whether or not the
+  experiment below is enabled.
+
+  Behind experiment `platform_editor_renderer_defer_content`, `content` is no longer provided on any
+  node that has children (a childless node keeps the `null` both arms produce). Custom
+  `nodeComponents` that read `content` should read `content ?? getContent?.()`, which covers both
+  arms without serializing twice while the experiment is off; `content` is removed outright when the
+  experiment ships. Extension handlers are unaffected — `ExtensionParams.content` is still
+  populated, now from a single `getContent()` call rather than one serialization per ancestor.
+
 ## 137.0.0
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -21,6 +21,7 @@ var _links = require("./utils/links");
 var _utils = require("@atlaskit/editor-common/utils");
 var _validator = require("@atlaskit/editor-common/validator");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _utils3 = require("../utils");
 var _marks = require("./marks");
@@ -29,6 +30,7 @@ var _rendererNode = require("./renderer-node");
 var _renderTextSegments = require("./utils/render-text-segments");
 var _segmentText = require("./utils/segment-text");
 var _getStandaloneBackgroundColorMarks = require("./utils/getStandaloneBackgroundColorMarks");
+var _contentGetter = require("./utils/content-getter");
 var _markBlockAsInline = require("./utils/markBlockAsInline");
 var _excluded = ["key"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -667,8 +669,18 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
   }, {
     key: "getProps",
     value: function getProps(node) {
+      var _node$content;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var startPos = this.startPos + path.length;
+
+      // `content` is a recursive Fragment.toJSON() attached to every node, so the document is
+      // re-serialized once per ancestor — O(depth x size) overall, and a table paid it again for
+      // every row and cell. Consumers read `getContent()` instead, which serializes at most once.
+      // Experiment call last, so exposure only fires for nodes that have content to serialize.
+      var skipEagerContent = !!((_node$content = node.content) !== null && _node$content !== void 0 && _node$content.childCount) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_renderer_defer_content');
+
+      // Shared so the `content` prop and `getContent()` never serialize the subtree twice.
+      var getContent = (0, _contentGetter.createContentGetter)(node.content);
       return _objectSpread({
         asInline: this.inlinePositions.has(startPos) ? 'on' : undefined,
         text: node.text,
@@ -678,7 +690,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         portal: this.portal,
         rendererContext: this.rendererContext,
         serializer: this,
-        content: node.content ? node.content.toJSON() : undefined,
+        content: skipEagerContent ? undefined : getContent(),
+        getContent: getContent,
         allowHeadingAnchorLinks: this.allowHeadingAnchorLinks,
         allowCopyToClipboard: this.allowCopyToClipboard,
         allowDownloadCodeBlock: this.allowDownloadCodeBlock,
@@ -714,7 +727,6 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     value: function getHeadingProps(node) {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
-        content: node.content ? node.content.toJSON() : undefined,
         headingId: this.getHeadingId(node, this.headingIds),
         showAnchorLink: this.appearance !== 'comment' && this.allowHeadingAnchorLinks && !this.disableHeadingIDs && this.headingAnchorSupported(path)
       });

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

@@ -8,7 +8,8 @@ exports.default = LayoutSection;
 var _react = _interopRequireDefault(require("react"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 function LayoutSection(props) {
-  var _props$content;
+  var _ref, _props$content, _props$getContent;
+  var columnCount = (_ref = (_props$content = props.content) !== null && _props$content !== void 0 ? _props$content : (_props$getContent = props.getContent) === null || _props$getContent === void 0 ? void 0 : _props$getContent.call(props)) === null || _ref === void 0 ? void 0 : _ref.length;
   return (0, _experiments.editorExperiment)('advanced_layouts', true) ?
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -17,7 +18,7 @@ function LayoutSection(props) {
     "data-local-id": props.localId
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-layout-section": true,
-    "data-layout-columns": props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
+    "data-layout-columns": columnCount
   }, props.children)) : /*#__PURE__*/_react.default.createElement("div", {
     "data-layout-section": true,
     "data-local-id": props.localId

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

@@ -119,6 +119,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     extensionKey = props.extensionKey,
     extensionHandlers = props.extensionHandlers,
     content = props.content,
+    getContent = props.getContent,
     marks = props.marks,
     localId = props.localId,
     rendererAppearance = props.rendererAppearance;
@@ -159,7 +160,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       extensionKey: extensionKey,
       extensionType: extensionType,
       parameters: parameters,
-      content: content,
+      content: content !== null && content !== void 0 ? content : getContent === null || getContent === void 0 ? void 0 : getContent(),
       localId: localId,
       fragmentLocalId: fragmentLocalId
     };
@@ -174,7 +175,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
         actions: actions
       })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression

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

@@ -12,11 +12,14 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _lists = require("../utils/lists");
 function OrderedList(props) {
-  var _props$content;
+  var _ref, _props$content, _props$getContent;
   var extraProps = {};
+
+  // Item count drives the marker column width, so losing it narrows the gutter by a digit.
+  var itemsCount = (_ref = (_props$content = props.content) !== null && _props$content !== void 0 ? _props$content : (_props$getContent = props.getContent) === null || _props$getContent === void 0 ? void 0 : _props$getContent.call(props)) === null || _ref === void 0 ? void 0 : _ref.length;
   var itemCounterDigitsSize = (0, _utils.getItemCounterDigitsSize)({
     order: props.order,
-    itemsCount: props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
+    itemsCount: itemsCount
   });
   if (itemCounterDigitsSize && itemCounterDigitsSize > 1) {
     extraProps.style = (0, _styles.getOrderedListInlineStyles)(itemCounterDigitsSize, 'object');

package/dist/cjs/react/utils/content-getter.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createContentGetter = void 0;
+/**
+ * Builds the `getContent` node prop: `fragment.toJSON()` computed on first call and memoized for
+ * the lifetime of the props object it is attached to.
+ *
+ * A prop getter cannot achieve the same deferral: `getProps`' callers spread its result and React
+ * copies props again on element creation, so a getter would run before any component reads it.
+ */
+var createContentGetter = exports.createContentGetter = function createContentGetter(fragment) {
+  var serialized;
+  var materialized = false;
+  return function () {
+    if (!materialized) {
+      serialized = fragment ? fragment.toJSON() : undefined;
+      // Set last: if `toJSON()` throws, the error propagates and a retry re-attempts instead of
+      // caching a partial result.
+      materialized = true;
+    }
+    return serialized;
+  };
+};

package/dist/cjs/ui/ExtensionRenderer.js

@@ -54,6 +54,7 @@ function ExtensionRenderer(props) {
     extensionKey = props.extensionKey,
     parameters = props.parameters,
     content = props.content,
+    getContent = props.getContent,
     text = props.text,
     type = props.type,
     localId = props.localId,
@@ -90,12 +91,16 @@ function ExtensionRenderer(props) {
     var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
       return m.type.name === 'fragment';
     })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;
+
+    // Extension handlers read the macro body off `node.content`, so this is the one place that
+    // always has to serialize. `getContent` is what makes it a single pass instead of one per
+    // ancestor node.
     var node = {
       type: type,
       extensionKey: extensionKey,
       extensionType: extensionType,
       parameters: parameters,
-      content: content || text,
+      content: (content !== null && content !== void 0 ? content : getContent === null || getContent === void 0 ? void 0 : getContent()) || text,
       localId: localId,
       fragmentLocalId: fragmentLocalId
     };
@@ -134,7 +139,7 @@ function ExtensionRenderer(props) {
       node: node,
       result: result
     });
-  }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
+  }, [actions, children, content, getContent, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
   var setupAndRenderExtensionNode = _react2.default.useCallback(function (providers) {
     if (extensionProvider === null && providers.extensionProvider) {
       handleProvider('extensionProvider', providers.extensionProvider);

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

package/dist/es2019/react/index.js

@@ -10,6 +10,7 @@ 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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getText } from '../utils';
 import { isAnnotationMark, toReact as markToReact } from './marks';
@@ -18,6 +19,7 @@ import { getNestedUnderNodes, insideBlockNode, insideMultiBodiedExtension, insid
 import { renderTextSegments } from './utils/render-text-segments';
 import { segmentText } from './utils/segment-text';
 import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
+import { createContentGetter } from './utils/content-getter';
 import { markBlockAsInline } from './utils/markBlockAsInline';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
@@ -595,7 +597,17 @@ export default class ReactSerializer {
     };
   }
   getProps(node, path = []) {
+    var _node$content;
     const startPos = this.startPos + path.length;
+
+    // `content` is a recursive Fragment.toJSON() attached to every node, so the document is
+    // re-serialized once per ancestor — O(depth x size) overall, and a table paid it again for
+    // every row and cell. Consumers read `getContent()` instead, which serializes at most once.
+    // Experiment call last, so exposure only fires for nodes that have content to serialize.
+    const skipEagerContent = !!((_node$content = node.content) !== null && _node$content !== void 0 && _node$content.childCount) && isExperimentEnabled('platform_editor_renderer_defer_content');
+
+    // Shared so the `content` prop and `getContent()` never serialize the subtree twice.
+    const getContent = createContentGetter(node.content);
     return {
       asInline: this.inlinePositions.has(startPos) ? 'on' : undefined,
       text: node.text,
@@ -605,7 +617,8 @@ export default class ReactSerializer {
       portal: this.portal,
       rendererContext: this.rendererContext,
       serializer: this,
-      content: node.content ? node.content.toJSON() : undefined,
+      content: skipEagerContent ? undefined : getContent(),
+      getContent,
       allowHeadingAnchorLinks: this.allowHeadingAnchorLinks,
       allowCopyToClipboard: this.allowCopyToClipboard,
       allowDownloadCodeBlock: this.allowDownloadCodeBlock,
@@ -637,7 +650,6 @@ export default class ReactSerializer {
   getHeadingProps(node, path = []) {
     return {
       ...this.getProps(node, path),
-      content: node.content ? node.content.toJSON() : undefined,
       headingId: this.getHeadingId(node, this.headingIds),
       showAnchorLink: this.appearance !== 'comment' && this.allowHeadingAnchorLinks && !this.disableHeadingIDs && this.headingAnchorSupported(path)
     };

package/dist/es2019/react/nodes/layoutSection.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export default function LayoutSection(props) {
-  var _props$content;
+  var _ref, _props$content, _props$getContent;
+  const columnCount = (_ref = (_props$content = props.content) !== null && _props$content !== void 0 ? _props$content : (_props$getContent = props.getContent) === null || _props$getContent === void 0 ? void 0 : _props$getContent.call(props)) === null || _ref === void 0 ? void 0 : _ref.length;
   return editorExperiment('advanced_layouts', true) ?
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -10,7 +11,7 @@ export default function LayoutSection(props) {
     "data-local-id": props.localId
   }, /*#__PURE__*/React.createElement("div", {
     "data-layout-section": true,
-    "data-layout-columns": props === null || props === void 0 ? void 0 : (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
+    "data-layout-columns": columnCount
   }, props.children)) : /*#__PURE__*/React.createElement("div", {
     "data-layout-section": true,
     "data-local-id": props.localId

package/dist/es2019/react/nodes/multiBodiedExtension.js

@@ -111,6 +111,7 @@ const MultiBodiedExtension = props => {
     extensionKey,
     extensionHandlers,
     content,
+    getContent,
     marks,
     localId,
     rendererAppearance
@@ -151,7 +152,7 @@ const MultiBodiedExtension = props => {
       extensionKey,
       extensionType,
       parameters,
-      content,
+      content: content !== null && content !== void 0 ? content : getContent === null || getContent === void 0 ? void 0 : getContent(),
       localId,
       fragmentLocalId
     };
@@ -166,7 +167,7 @@ const MultiBodiedExtension = props => {
         actions: actions
       })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression

package/dist/es2019/react/nodes/orderedList.js

@@ -5,11 +5,14 @@ import { getOrderedListInlineStyles } from '@atlaskit/editor-common/styles';
 import { getItemCounterDigitsSize, resolveOrder } from '@atlaskit/editor-common/utils';
 import { getListIndentLevel } from '../utils/lists';
 export default function OrderedList(props) {
-  var _props$content;
+  var _ref, _props$content, _props$getContent;
   const extraProps = {};
+
+  // Item count drives the marker column width, so losing it narrows the gutter by a digit.
+  const itemsCount = (_ref = (_props$content = props.content) !== null && _props$content !== void 0 ? _props$content : (_props$getContent = props.getContent) === null || _props$getContent === void 0 ? void 0 : _props$getContent.call(props)) === null || _ref === void 0 ? void 0 : _ref.length;
   const itemCounterDigitsSize = getItemCounterDigitsSize({
     order: props.order,
-    itemsCount: props === null || props === void 0 ? void 0 : (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
+    itemsCount
   });
   if (itemCounterDigitsSize && itemCounterDigitsSize > 1) {
     extraProps.style = getOrderedListInlineStyles(itemCounterDigitsSize, 'object');

package/dist/es2019/react/nodes/syncBlock.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 // For sync block to work, we are passing in a custom syncBlock renderer through nodeComponents
 // However, we need define a basic component to render the sync block
 export default function SyncBlock(props) {

package/dist/es2019/react/utils/content-getter.js

@@ -0,0 +1,20 @@
+/**
+ * Builds the `getContent` node prop: `fragment.toJSON()` computed on first call and memoized for
+ * the lifetime of the props object it is attached to.
+ *
+ * A prop getter cannot achieve the same deferral: `getProps`' callers spread its result and React
+ * copies props again on element creation, so a getter would run before any component reads it.
+ */
+export const createContentGetter = fragment => {
+  let serialized;
+  let materialized = false;
+  return () => {
+    if (!materialized) {
+      serialized = fragment ? fragment.toJSON() : undefined;
+      // Set last: if `toJSON()` throws, the error propagates and a retry re-attempts instead of
+      // caching a partial result.
+      materialized = true;
+    }
+    return serialized;
+  };
+};

package/dist/es2019/ui/ExtensionRenderer.js

@@ -44,6 +44,7 @@ export default function ExtensionRenderer(props) {
     extensionKey,
     parameters,
     content,
+    getContent,
     text,
     type,
     localId,
@@ -74,12 +75,16 @@ export default function ExtensionRenderer(props) {
   const renderExtensionNode = React.useCallback((extensionProvider, isExtensionProviderPending) => {
     var _marks$find, _marks$find$attrs, _node$parameters, _node$parameters$macr;
     const fragmentLocalId = marks === null || marks === void 0 ? void 0 : (_marks$find = marks.find(m => m.type.name === 'fragment')) === null || _marks$find === void 0 ? void 0 : (_marks$find$attrs = _marks$find.attrs) === null || _marks$find$attrs === void 0 ? void 0 : _marks$find$attrs.localId;
+
+    // Extension handlers read the macro body off `node.content`, so this is the one place that
+    // always has to serialize. `getContent` is what makes it a single pass instead of one per
+    // ancestor node.
     const node = {
       type,
       extensionKey,
       extensionType,
       parameters,
-      content: content || text,
+      content: (content !== null && content !== void 0 ? content : getContent === null || getContent === void 0 ? void 0 : getContent()) || text,
       localId,
       fragmentLocalId
     };
@@ -118,7 +123,7 @@ export default function ExtensionRenderer(props) {
       node,
       result
     });
-  }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
+  }, [actions, children, content, getContent, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
   const setupAndRenderExtensionNode = React.useCallback(providers => {
     if (extensionProvider === null && providers.extensionProvider) {
       handleProvider('extensionProvider', providers.extensionProvider);

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

@@ -60,7 +60,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "136.2.7";
+const packageVersion = "137.1.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/index.js

@@ -17,6 +17,7 @@ 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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getText } from '../utils';
 import { isAnnotationMark, toReact as markToReact } from './marks';
@@ -25,6 +26,7 @@ import { getNestedUnderNodes, insideBlockNode, insideMultiBodiedExtension, insid
 import { renderTextSegments } from './utils/render-text-segments';
 import { segmentText } from './utils/segment-text';
 import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
+import { createContentGetter } from './utils/content-getter';
 import { markBlockAsInline } from './utils/markBlockAsInline';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
@@ -660,8 +662,18 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getProps",
     value: function getProps(node) {
+      var _node$content;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var startPos = this.startPos + path.length;
+
+      // `content` is a recursive Fragment.toJSON() attached to every node, so the document is
+      // re-serialized once per ancestor — O(depth x size) overall, and a table paid it again for
+      // every row and cell. Consumers read `getContent()` instead, which serializes at most once.
+      // Experiment call last, so exposure only fires for nodes that have content to serialize.
+      var skipEagerContent = !!((_node$content = node.content) !== null && _node$content !== void 0 && _node$content.childCount) && isExperimentEnabled('platform_editor_renderer_defer_content');
+
+      // Shared so the `content` prop and `getContent()` never serialize the subtree twice.
+      var getContent = createContentGetter(node.content);
       return _objectSpread({
         asInline: this.inlinePositions.has(startPos) ? 'on' : undefined,
         text: node.text,
@@ -671,7 +683,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         portal: this.portal,
         rendererContext: this.rendererContext,
         serializer: this,
-        content: node.content ? node.content.toJSON() : undefined,
+        content: skipEagerContent ? undefined : getContent(),
+        getContent: getContent,
         allowHeadingAnchorLinks: this.allowHeadingAnchorLinks,
         allowCopyToClipboard: this.allowCopyToClipboard,
         allowDownloadCodeBlock: this.allowDownloadCodeBlock,
@@ -707,7 +720,6 @@ var ReactSerializer = /*#__PURE__*/function () {
     value: function getHeadingProps(node) {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
-        content: node.content ? node.content.toJSON() : undefined,
         headingId: this.getHeadingId(node, this.headingIds),
         showAnchorLink: this.appearance !== 'comment' && this.allowHeadingAnchorLinks && !this.disableHeadingIDs && this.headingAnchorSupported(path)
       });

package/dist/esm/react/nodes/layoutSection.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export default function LayoutSection(props) {
-  var _props$content;
+  var _ref, _props$content, _props$getContent;
+  var columnCount = (_ref = (_props$content = props.content) !== null && _props$content !== void 0 ? _props$content : (_props$getContent = props.getContent) === null || _props$getContent === void 0 ? void 0 : _props$getContent.call(props)) === null || _ref === void 0 ? void 0 : _ref.length;
   return editorExperiment('advanced_layouts', true) ?
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -10,7 +11,7 @@ export default function LayoutSection(props) {
     "data-local-id": props.localId
   }, /*#__PURE__*/React.createElement("div", {
     "data-layout-section": true,
-    "data-layout-columns": props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
+    "data-layout-columns": columnCount
   }, props.children)) : /*#__PURE__*/React.createElement("div", {
     "data-layout-section": true,
     "data-local-id": props.localId

package/dist/esm/react/nodes/multiBodiedExtension.js

@@ -111,6 +111,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     extensionKey = props.extensionKey,
     extensionHandlers = props.extensionHandlers,
     content = props.content,
+    getContent = props.getContent,
     marks = props.marks,
     localId = props.localId,
     rendererAppearance = props.rendererAppearance;
@@ -151,7 +152,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       extensionKey: extensionKey,
       extensionType: extensionType,
       parameters: parameters,
-      content: content,
+      content: content !== null && content !== void 0 ? content : getContent === null || getContent === void 0 ? void 0 : getContent(),
       localId: localId,
       fragmentLocalId: fragmentLocalId
     };
@@ -166,7 +167,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
         actions: actions
       })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
     }
-  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
+  }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, getContent, localId, actions, children]);
 
   // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression

package/dist/esm/react/nodes/orderedList.js

@@ -5,11 +5,14 @@ import { getOrderedListInlineStyles } from '@atlaskit/editor-common/styles';
 import { getItemCounterDigitsSize, resolveOrder } from '@atlaskit/editor-common/utils';
 import { getListIndentLevel } from '../utils/lists';
 export default function OrderedList(props) {
-  var _props$content;
+  var _ref, _props$content, _props$getContent;
   var extraProps = {};
+
+  // Item count drives the marker column width, so losing it narrows the gutter by a digit.
+  var itemsCount = (_ref = (_props$content = props.content) !== null && _props$content !== void 0 ? _props$content : (_props$getContent = props.getContent) === null || _props$getContent === void 0 ? void 0 : _props$getContent.call(props)) === null || _ref === void 0 ? void 0 : _ref.length;
   var itemCounterDigitsSize = getItemCounterDigitsSize({
     order: props.order,
-    itemsCount: props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
+    itemsCount: itemsCount
   });
   if (itemCounterDigitsSize && itemCounterDigitsSize > 1) {
     extraProps.style = getOrderedListInlineStyles(itemCounterDigitsSize, 'object');

package/dist/esm/react/nodes/syncBlock.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 // For sync block to work, we are passing in a custom syncBlock renderer through nodeComponents
 // However, we need define a basic component to render the sync block
 export default function SyncBlock(props) {

package/dist/esm/react/utils/content-getter.js

@@ -0,0 +1,20 @@
+/**
+ * Builds the `getContent` node prop: `fragment.toJSON()` computed on first call and memoized for
+ * the lifetime of the props object it is attached to.
+ *
+ * A prop getter cannot achieve the same deferral: `getProps`' callers spread its result and React
+ * copies props again on element creation, so a getter would run before any component reads it.
+ */
+export var createContentGetter = function createContentGetter(fragment) {
+  var serialized;
+  var materialized = false;
+  return function () {
+    if (!materialized) {
+      serialized = fragment ? fragment.toJSON() : undefined;
+      // Set last: if `toJSON()` throws, the error propagates and a retry re-attempts instead of
+      // caching a partial result.
+      materialized = true;
+    }
+    return serialized;
+  };
+};

package/dist/esm/ui/ExtensionRenderer.js

@@ -44,6 +44,7 @@ export default function ExtensionRenderer(props) {
     extensionKey = props.extensionKey,
     parameters = props.parameters,
     content = props.content,
+    getContent = props.getContent,
     text = props.text,
     type = props.type,
     localId = props.localId,
@@ -80,12 +81,16 @@ export default function ExtensionRenderer(props) {
     var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
       return m.type.name === 'fragment';
     })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;
+
+    // Extension handlers read the macro body off `node.content`, so this is the one place that
+    // always has to serialize. `getContent` is what makes it a single pass instead of one per
+    // ancestor node.
     var node = {
       type: type,
       extensionKey: extensionKey,
       extensionType: extensionType,
       parameters: parameters,
-      content: content || text,
+      content: (content !== null && content !== void 0 ? content : getContent === null || getContent === void 0 ? void 0 : getContent()) || text,
       localId: localId,
       fragmentLocalId: fragmentLocalId
     };
@@ -124,7 +129,7 @@ export default function ExtensionRenderer(props) {
       node: node,
       result: result
     });
-  }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
+  }, [actions, children, content, getContent, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
   var setupAndRenderExtensionNode = React.useCallback(function (providers) {
     if (extensionProvider === null && providers.extensionProvider) {
       handleProvider('extensionProvider', providers.extensionProvider);

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

@@ -65,7 +65,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "136.2.7";
+var packageVersion = "137.1.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/entry-points/react-types.d.ts

@@ -1 +1 @@
-export type { AnnotationMarkMeta, ExtensionViewportSize, MarkMeta, MarkProps, NodeMeta, NodeProps, RendererContext, TextHighlighter, } from '../react/types';
+export type { AnnotationMarkMeta, ExtensionViewportSize, MarkMeta, MarkProps, NodeContent, NodeMeta, NodeProps, RendererContext, TextHighlighter, } from '../react/types';

package/dist/types/react/nodes/bodiedExtension.d.ts

@@ -14,6 +14,7 @@ interface Props {
     extensionType: string;
     extensionViewportSizes?: ExtensionViewportSize[];
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    getContent?: () => any;
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];

package/dist/types/react/nodes/layoutSection.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeContent } from '../types';
 export default function LayoutSection(props: React.PropsWithChildren<{
-    content?: PMNode[];
+    content?: NodeContent;
+    getContent?: () => NodeContent | undefined;
     localId?: string;
 }>): React.JSX.Element;

package/dist/types/react/nodes/multiBodiedExtension.d.ts

@@ -16,6 +16,7 @@ type Props = React.PropsWithChildren<{
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
     extensionType: string;
+    getContent?: () => any;
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];

package/dist/types/react/nodes/orderedList.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
+import type { NodeContent } from '../types';
 export default function OrderedList(props: {
     children: React.ReactNode;
-    content?: Node[];
+    content?: NodeContent;
+    getContent?: () => NodeContent | undefined;
     localId?: string;
     order?: number;
     path?: Node[];

package/dist/types/react/nodes/syncBlock.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 export default function SyncBlock(props: React.PropsWithChildren<{
-    content?: PMNode[];
     localId?: string;
     resourceId?: string;
 }>): React.JSX.Element;

package/dist/types/react/types.d.ts

@@ -14,6 +14,14 @@ export interface RendererContext {
     objectAri?: string;
     schema?: Schema;
 }
+/**
+ * `Fragment.toJSON()`: the node's children as plain ADF JSON objects, or `null` for an empty
+ * fragment. Not ProseMirror `Node` instances, so model APIs such as `nodeSize` or `childCount`
+ * are unavailable.
+ */
+export type NodeContent = Array<{
+    [key: string]: any;
+}> | null;
 export interface NodeMeta {
     [key: string]: any;
     allowCopyToClipboard?: boolean;
@@ -23,15 +31,30 @@ export interface NodeMeta {
     allowPlaceholderText?: boolean;
     allowWrapCodeBlock?: boolean;
     asInline?: 'on' | undefined;
-    content?: {
-        [key: string]: any;
-    } | null;
+    /**
+     * Superseded by `getContent()`, and removed once `platform_editor_renderer_defer_content` ships.
+     * A recursive `Fragment.toJSON()` of the node's subtree, serialized on every render whether or
+     * not anything reads it — so the document was re-serialized once per ancestor node. While that
+     * experiment is enabled it is not provided on any node that has children; a childless node keeps
+     * the `null` both arms produce. Read `content ?? getContent?.()` so both arms are covered.
+     */
+    content?: NodeContent;
     dataAttributes: {
         'data-renderer-start-pos': number;
     };
     eventHandlers?: EventHandlers | undefined;
     extensionHandlers?: ExtensionHandlers | undefined;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    /**
+     * Serialized JSON of the node's content — the replacement for the `content` prop. Computed on
+     * first call and memoized, so a node whose content nothing reads costs nothing.
+     *
+     * `ReactSerializer` attaches this to every node it builds props for, in both arms of
+     * `platform_editor_renderer_defer_content`. Read `content ?? getContent?.()`: with the experiment
+     * off `content` is already serialized and calling this adds nothing, and with it on `content` is
+     * the operand that is absent — so both sides of that expression stay live until `content` goes.
+     */
+    getContent?: () => NodeContent | undefined;
     hideExtensionKeysWhilePending?: string[];
     marks: PMNode['marks'];
     nodeType: NodeType['name'];

package/dist/types/react/utils/content-getter.d.ts

@@ -0,0 +1,10 @@
+import type { Fragment } from '@atlaskit/editor-prosemirror/model';
+import type { NodeContent } from '../types';
+/**
+ * Builds the `getContent` node prop: `fragment.toJSON()` computed on first call and memoized for
+ * the lifetime of the props object it is attached to.
+ *
+ * A prop getter cannot achieve the same deferral: `getProps`' callers spread its result and React
+ * copies props again on element creation, so a getter would run before any component reads it.
+ */
+export declare const createContentGetter: (fragment: Fragment | undefined) => (() => NodeContent | undefined);

package/dist/types/ui/ExtensionRenderer.d.ts

@@ -16,10 +16,15 @@ interface Props {
         node: ExtensionParams<Parameters>;
         result?: JSX.Element | null;
     }) => JSX.Element;
+    /**
+     * Read as `content ?? getContent?.()` — absent on nodes with children once the serializer defers
+     * serialization, and the already-serialized value otherwise.
+     */
     content?: any;
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
     extensionType: string;
+    getContent?: () => any;
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "137.0.0",
+	"version": "137.1.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
 		"@atlaskit/status": "^5.8.0",
 		"@atlaskit/task-decision": "^21.8.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^160.0.0",
+		"@atlaskit/tmp-editor-statsig": "^161.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@atlaskit/visually-hidden": "^4.3.0",