@atlaskit/editor-ssr-renderer 2.1.7 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-ssr-renderer
 
+## 2.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.2.0
+
+### Minor Changes
+
+- [`cbc1403b3cae1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cbc1403b3cae1) -
+  [EDITOR-5094](https://hello.jira.atlassian.cloud/browse/EDITOR-5094) - add PerfPortal segments for
+  editor SSR logic
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.7
 
 ### Patch Changes

package/dist/cjs/editor-ssr-renderer/EditorSSRRenderer.js

@@ -21,12 +21,16 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _eventDispatcher = require("@atlaskit/editor-common/event-dispatcher");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl", "onEditorStateChanged"];
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ssrMeasures = require("@atlaskit/editor-common/performance/ssr-measures");
+var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl", "onSSRMeasure", "onEditorStateChanged"];
 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); }
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var SSR_TRACE_SEGMENT_NAME = 'reactEditorView/editorSSRRenderer';
+
 // The copy of type from prosemirror-view.
 // Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
 /**
@@ -179,43 +183,50 @@ function EditorSSRRenderer(_ref) {
     doc = _ref.doc,
     portalProviderAPI = _ref.portalProviderAPI,
     intl = _ref.intl,
+    onSSRMeasure = _ref.onSSRMeasure,
     onEditorStateChanged = _ref.onEditorStateChanged,
     divProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // Should be always the first statement in the component
+  var firstRenderStartTimestampRef = (0, _react.useRef)(performance.now());
+
   // PMPluginFactoryParams use `getIntl` function to get current intl instance,
   // so we don't need to add `intl` as a dependency to `useMemo`.
   // We will store intl in ref and access to it dynamically in `getIntl` function call.
   var intlRef = (0, _react.useRef)(intl);
   intlRef.current = intl;
   var pmPlugins = (0, _react.useMemo)(function () {
-    var eventDispatcher = new SSREventDispatcher();
-    var providerFactory = new _providerFactory.ProviderFactory();
-    var pmPluginFactoryParams = {
-      dispatch: (0, _eventDispatcher.createDispatch)(eventDispatcher),
-      dispatchAnalyticsEvent: function dispatchAnalyticsEvent() {},
-      eventDispatcher: eventDispatcher,
-      featureFlags: {},
-      getIntl: function getIntl() {
-        return intlRef.current;
-      },
-      nodeViewPortalProviderAPI: portalProviderAPI,
-      portalProviderAPI: portalProviderAPI,
-      providerFactory: providerFactory,
-      schema: schema
+    var createPMPlugins = function createPMPlugins() {
+      var eventDispatcher = new SSREventDispatcher();
+      var providerFactory = new _providerFactory.ProviderFactory();
+      var pmPluginFactoryParams = {
+        dispatch: (0, _eventDispatcher.createDispatch)(eventDispatcher),
+        dispatchAnalyticsEvent: function dispatchAnalyticsEvent() {},
+        eventDispatcher: eventDispatcher,
+        featureFlags: {},
+        getIntl: function getIntl() {
+          return intlRef.current;
+        },
+        nodeViewPortalProviderAPI: portalProviderAPI,
+        portalProviderAPI: portalProviderAPI,
+        providerFactory: providerFactory,
+        schema: schema
+      };
+      return plugins.reduce(function (acc, editorPlugin) {
+        var _editorPlugin$pmPlugi;
+        (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 || _editorPlugin$pmPlugi.call(editorPlugin).forEach(function (_ref2) {
+          var plugin = _ref2.plugin;
+          try {
+            var pmPlugin = plugin(pmPluginFactoryParams);
+            if (pmPlugin) {
+              acc.push(pmPlugin);
+            }
+          } catch (_unused) {}
+        });
+        return acc;
+      }, []);
     };
-    return plugins.reduce(function (acc, editorPlugin) {
-      var _editorPlugin$pmPlugi;
-      (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 || _editorPlugin$pmPlugi.call(editorPlugin).forEach(function (_ref2) {
-        var plugin = _ref2.plugin;
-        try {
-          var pmPlugin = plugin(pmPluginFactoryParams);
-          if (pmPlugin) {
-            acc.push(pmPlugin);
-          }
-        } catch (_unused) {}
-      });
-      return acc;
-    }, []);
-  }, [plugins, portalProviderAPI, schema]);
+    return (0, _platformFeatureFlags.fg)('platform_editor_better_editor_ssr_spans') ? (0, _ssrMeasures.profileSSROperation)("".concat(SSR_TRACE_SEGMENT_NAME, "/createPMPlugins"), createPMPlugins, onSSRMeasure) : createPMPlugins();
+  }, [plugins, portalProviderAPI, schema, onSSRMeasure]);
   var nodeViews = (0, _react.useMemo)(function () {
     return pmPlugins.reduce(function (acc, plugin) {
       return Object.assign(acc, plugin.props.nodeViews);
@@ -227,12 +238,15 @@ function EditorSSRRenderer(_ref) {
     }, {});
   }, [pmPlugins]);
   var editorState = (0, _react.useMemo)(function () {
-    return _state.EditorState.create({
-      doc: doc,
-      schema: schema,
-      plugins: pmPlugins
-    });
-  }, [doc, pmPlugins, schema]);
+    var createEditorState = function createEditorState() {
+      return _state.EditorState.create({
+        doc: doc,
+        schema: schema,
+        plugins: pmPlugins
+      });
+    };
+    return (0, _platformFeatureFlags.fg)('platform_editor_better_editor_ssr_spans') ? (0, _ssrMeasures.profileSSROperation)("".concat(SSR_TRACE_SEGMENT_NAME, "/createEditorState"), createEditorState, onSSRMeasure) : createEditorState();
+  }, [doc, pmPlugins, schema, onSSRMeasure]);
 
   // In React 19 could be replaced by `useEffectEvent` hook.
   var onEditorStateChangedRef = (0, _react.useRef)(onEditorStateChanged);
@@ -247,127 +261,133 @@ function EditorSSRRenderer(_ref) {
     });
   }, [editorState]);
   var _useMemo = (0, _react.useMemo)(function () {
-      var nodePositions = new WeakMap();
+      var createSerializerAndNodePositions = function createSerializerAndNodePositions() {
+        var nodePositions = new WeakMap();
 
-      // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
-      // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
-      //
-      // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
-      // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
-      // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
-      // we are rendering child node.
-      //
-      // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
-      // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
-      // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
-      var addTrailingBreakIfNeeded = function addTrailingBreakIfNeeded(node, contentDOM) {
-        if (contentDOM && node.isTextblock && !node.lastChild) {
-          var br = document.createElement('br');
-          br.classList.add('ProseMirror-trailingBreak');
-          contentDOM.appendChild(br);
-        }
-      };
-      var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
-        var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-          nodeName = _ref4[0],
-          nodeType = _ref4[1];
-        return [nodeName, nodeType.spec.toDOM];
-      }).filter(function (_ref5) {
-        var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-          toDOM = _ref6[1];
-        return !!toDOM;
-      }));
-      var toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(function (_ref7) {
-        var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
-          markName = _ref8[0],
-          markType = _ref8[1];
-        return [markName, markType.spec.toDOM];
-      }).filter(function (_ref9) {
-        var _ref0 = (0, _slicedToArray2.default)(_ref9, 2),
-          toDOM = _ref0[1];
-        return !!toDOM;
-      }));
-      var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
-        var _ref10 = (0, _slicedToArray2.default)(_ref1, 2),
-          nodeName = _ref10[0],
-          nodeViewFactory = _ref10[1];
-        return [nodeName, function (node) {
-          var nodeViewInstance = nodeViewFactory(node, editorView, function () {
-            var _nodePositions$get;
-            return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
-          }, [], _view.DecorationSet.create(node, []));
-          addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
-          return {
-            dom: nodeViewInstance.dom,
-            // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
-            contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
-          };
-        }];
-      }));
+        // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
+        // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
+        //
+        // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
+        // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
+        // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
+        // we are rendering child node.
+        //
+        // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
+        // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
+        // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
+        var addTrailingBreakIfNeeded = function addTrailingBreakIfNeeded(node, contentDOM) {
+          if (contentDOM && node.isTextblock && !node.lastChild) {
+            var br = document.createElement('br');
+            br.classList.add('ProseMirror-trailingBreak');
+            contentDOM.appendChild(br);
+          }
+        };
+        var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+            nodeName = _ref4[0],
+            nodeType = _ref4[1];
+          return [nodeName, nodeType.spec.toDOM];
+        }).filter(function (_ref5) {
+          var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+            toDOM = _ref6[1];
+          return !!toDOM;
+        }));
+        var toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(function (_ref7) {
+          var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
+            markName = _ref8[0],
+            markType = _ref8[1];
+          return [markName, markType.spec.toDOM];
+        }).filter(function (_ref9) {
+          var _ref0 = (0, _slicedToArray2.default)(_ref9, 2),
+            toDOM = _ref0[1];
+          return !!toDOM;
+        }));
+        var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
+          var _ref10 = (0, _slicedToArray2.default)(_ref1, 2),
+            nodeName = _ref10[0],
+            nodeViewFactory = _ref10[1];
+          return [nodeName, function (node) {
+            var nodeViewInstance = nodeViewFactory(node, editorView, function () {
+              var _nodePositions$get;
+              return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
+            }, [], _view.DecorationSet.create(node, []));
+            addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
+            return {
+              dom: nodeViewInstance.dom,
+              // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
+              contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
+            };
+          }];
+        }));
 
-      // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
-      var textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(function (_ref11) {
-        var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
-          nodeName = _ref12[0],
-          nodeType = _ref12[1];
-        // Only handle textblock nodes
-        return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
-      }).map(function (_ref13) {
-        var _ref14 = (0, _slicedToArray2.default)(_ref13, 2),
-          nodeName = _ref14[0],
-          nodeType = _ref14[1];
-        var toDOM = nodeType.spec.toDOM;
-        if (!toDOM) {
-          return [nodeName, undefined];
-        }
-        return [nodeName, function (node) {
-          if (!node.lastChild) {
-            var result = _model.DOMSerializer.renderSpec(document, toDOM(node));
-            addTrailingBreakIfNeeded(node, result.contentDOM);
-            return result;
+        // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
+        var textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(function (_ref11) {
+          var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
+            nodeName = _ref12[0],
+            nodeType = _ref12[1];
+          // Only handle textblock nodes
+          return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
+        }).map(function (_ref13) {
+          var _ref14 = (0, _slicedToArray2.default)(_ref13, 2),
+            nodeName = _ref14[0],
+            nodeType = _ref14[1];
+          var toDOM = nodeType.spec.toDOM;
+          if (!toDOM) {
+            return [nodeName, undefined];
           }
-          return toDOM(node);
-        }];
-      }).filter(function (_ref15) {
-        var _ref16 = (0, _slicedToArray2.default)(_ref15, 2),
-          renderer = _ref16[1];
-        return !!renderer;
-      }));
-      var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref17) {
-        var _ref18 = (0, _slicedToArray2.default)(_ref17, 2),
-          markName = _ref18[0],
-          markViewFactory = _ref18[1];
-        return [markName, function (mark) {
-          var markViewInstance = markViewFactory(mark, editorView, false);
-          return {
-            dom: markViewInstance.dom,
-            contentDOM: markViewInstance.contentDOM
-          };
-        }];
-      }));
-      var serializer = new _model.DOMSerializer(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), textblockRenderers), nodeViewRenderers), {}, {
-        text: renderText
-      }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
-      return {
-        serializer: serializer,
-        nodePositions: nodePositions
+          return [nodeName, function (node) {
+            if (!node.lastChild) {
+              var result = _model.DOMSerializer.renderSpec(document, toDOM(node));
+              addTrailingBreakIfNeeded(node, result.contentDOM);
+              return result;
+            }
+            return toDOM(node);
+          }];
+        }).filter(function (_ref15) {
+          var _ref16 = (0, _slicedToArray2.default)(_ref15, 2),
+            renderer = _ref16[1];
+          return !!renderer;
+        }));
+        var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref17) {
+          var _ref18 = (0, _slicedToArray2.default)(_ref17, 2),
+            markName = _ref18[0],
+            markViewFactory = _ref18[1];
+          return [markName, function (mark) {
+            var markViewInstance = markViewFactory(mark, editorView, false);
+            return {
+              dom: markViewInstance.dom,
+              contentDOM: markViewInstance.contentDOM
+            };
+          }];
+        }));
+        var serializer = new _model.DOMSerializer(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), textblockRenderers), nodeViewRenderers), {}, {
+          text: renderText
+        }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
+        return {
+          serializer: serializer,
+          nodePositions: nodePositions
+        };
       };
-    }, [editorView, markViews, nodeViews, schema.marks, schema.nodes]),
+      return (0, _platformFeatureFlags.fg)('platform_editor_better_editor_ssr_spans') ? (0, _ssrMeasures.profileSSROperation)("".concat(SSR_TRACE_SEGMENT_NAME, "/createSerializerAndNodePositions"), createSerializerAndNodePositions, onSSRMeasure) : createSerializerAndNodePositions();
+    }, [editorView, markViews, nodeViews, schema.marks, schema.nodes, onSSRMeasure]),
     serializer = _useMemo.serializer,
     nodePositions = _useMemo.nodePositions;
   var editorHTML = (0, _react.useMemo)(function () {
-    if (!doc) {
-      return undefined;
-    }
-    try {
+    var serializeFragment = function serializeFragment() {
+      if (!doc) {
+        return undefined;
+      }
       doc.descendants(function (node, pos) {
         nodePositions.set(node, pos);
       });
       return serializer.serializeFragment(doc.content);
+    };
+    try {
+      return (0, _platformFeatureFlags.fg)('platform_editor_better_editor_ssr_spans') ? (0, _ssrMeasures.profileSSROperation)("".concat(SSR_TRACE_SEGMENT_NAME, "/serializeFragment"), serializeFragment, onSSRMeasure) : serializeFragment();
     } catch (_unused2) {
       return undefined;
     }
-  }, [doc, serializer, nodePositions]);
+  }, [doc, serializer, nodePositions, onSSRMeasure]);
   var containerRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {
     if (containerRef.current && editorHTML) {
@@ -375,7 +395,11 @@ function EditorSSRRenderer(_ref) {
       containerRef.current.appendChild(editorHTML);
     }
   }, [editorHTML]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_ssrMeasures.SSRRenderMeasure, {
+    segmentName: SSR_TRACE_SEGMENT_NAME,
+    startTimestampRef: firstRenderStartTimestampRef,
+    onSSRMeasure: (0, _platformFeatureFlags.fg)('platform_editor_better_editor_ssr_spans') ? onSSRMeasure : undefined
+  }, /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: divProps.id
     // For some reason on SSR, the result `class` has a trailing space, that broke UFO,
@@ -396,7 +420,7 @@ function EditorSSRRenderer(_ref) {
     contenteditable: "true",
     "data-gramm": "false",
     translate: "no"
-  });
+  }));
 }
 function renderText(node) {
   return node.text || '';

package/dist/es2019/editor-ssr-renderer/EditorSSRRenderer.js

@@ -5,6 +5,9 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { profileSSROperation, SSRRenderMeasure } from '@atlaskit/editor-common/performance/ssr-measures';
+const SSR_TRACE_SEGMENT_NAME = 'reactEditorView/editorSSRRenderer';
 
 // The copy of type from prosemirror-view.
 // Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
@@ -111,43 +114,50 @@ export function EditorSSRRenderer({
   doc,
   portalProviderAPI,
   intl,
+  onSSRMeasure,
   onEditorStateChanged,
   ...divProps
 }) {
+  // Should be always the first statement in the component
+  const firstRenderStartTimestampRef = useRef(performance.now());
+
   // PMPluginFactoryParams use `getIntl` function to get current intl instance,
   // so we don't need to add `intl` as a dependency to `useMemo`.
   // We will store intl in ref and access to it dynamically in `getIntl` function call.
   const intlRef = useRef(intl);
   intlRef.current = intl;
   const pmPlugins = useMemo(() => {
-    const eventDispatcher = new SSREventDispatcher();
-    const providerFactory = new ProviderFactory();
-    const pmPluginFactoryParams = {
-      dispatch: createDispatch(eventDispatcher),
-      dispatchAnalyticsEvent: () => {},
-      eventDispatcher,
-      featureFlags: {},
-      getIntl: () => intlRef.current,
-      nodeViewPortalProviderAPI: portalProviderAPI,
-      portalProviderAPI: portalProviderAPI,
-      providerFactory,
-      schema
+    const createPMPlugins = () => {
+      const eventDispatcher = new SSREventDispatcher();
+      const providerFactory = new ProviderFactory();
+      const pmPluginFactoryParams = {
+        dispatch: createDispatch(eventDispatcher),
+        dispatchAnalyticsEvent: () => {},
+        eventDispatcher,
+        featureFlags: {},
+        getIntl: () => intlRef.current,
+        nodeViewPortalProviderAPI: portalProviderAPI,
+        portalProviderAPI: portalProviderAPI,
+        providerFactory,
+        schema
+      };
+      return plugins.reduce((acc, editorPlugin) => {
+        var _editorPlugin$pmPlugi;
+        (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 ? void 0 : _editorPlugin$pmPlugi.call(editorPlugin).forEach(({
+          plugin
+        }) => {
+          try {
+            const pmPlugin = plugin(pmPluginFactoryParams);
+            if (pmPlugin) {
+              acc.push(pmPlugin);
+            }
+          } catch {}
+        });
+        return acc;
+      }, []);
     };
-    return plugins.reduce((acc, editorPlugin) => {
-      var _editorPlugin$pmPlugi;
-      (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 ? void 0 : _editorPlugin$pmPlugi.call(editorPlugin).forEach(({
-        plugin
-      }) => {
-        try {
-          const pmPlugin = plugin(pmPluginFactoryParams);
-          if (pmPlugin) {
-            acc.push(pmPlugin);
-          }
-        } catch {}
-      });
-      return acc;
-    }, []);
-  }, [plugins, portalProviderAPI, schema]);
+    return fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation(`${SSR_TRACE_SEGMENT_NAME}/createPMPlugins`, createPMPlugins, onSSRMeasure) : createPMPlugins();
+  }, [plugins, portalProviderAPI, schema, onSSRMeasure]);
   const nodeViews = useMemo(() => {
     return pmPlugins.reduce((acc, plugin) => {
       return Object.assign(acc, plugin.props.nodeViews);
@@ -159,12 +169,15 @@ export function EditorSSRRenderer({
     }, {});
   }, [pmPlugins]);
   const editorState = useMemo(() => {
-    return EditorState.create({
-      doc,
-      schema,
-      plugins: pmPlugins
-    });
-  }, [doc, pmPlugins, schema]);
+    const createEditorState = () => {
+      return EditorState.create({
+        doc,
+        schema,
+        plugins: pmPlugins
+      });
+    };
+    return fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation(`${SSR_TRACE_SEGMENT_NAME}/createEditorState`, createEditorState, onSSRMeasure) : createEditorState();
+  }, [doc, pmPlugins, schema, onSSRMeasure]);
 
   // In React 19 could be replaced by `useEffectEvent` hook.
   const onEditorStateChangedRef = useRef(onEditorStateChanged);
@@ -182,101 +195,107 @@ export function EditorSSRRenderer({
     serializer,
     nodePositions
   } = useMemo(() => {
-    const nodePositions = new WeakMap();
+    const createSerializerAndNodePositions = () => {
+      const nodePositions = new WeakMap();
 
-    // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
-    // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
-    //
-    // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
-    // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
-    // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
-    // we are rendering child node.
-    //
-    // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
-    // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
-    // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
-    const addTrailingBreakIfNeeded = (node, contentDOM) => {
-      if (contentDOM && node.isTextblock && !node.lastChild) {
-        const br = document.createElement('br');
-        br.classList.add('ProseMirror-trailingBreak');
-        contentDOM.appendChild(br);
-      }
-    };
-    const toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(([nodeName, nodeType]) => {
-      return [nodeName, nodeType.spec.toDOM];
-    }).filter(([, toDOM]) => !!toDOM));
-    const toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(([markName, markType]) => {
-      return [markName, markType.spec.toDOM];
-    }).filter(([, toDOM]) => !!toDOM));
-    const nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(([nodeName, nodeViewFactory]) => {
-      return [nodeName, node => {
-        const nodeViewInstance = nodeViewFactory(node, editorView, () => {
-          var _nodePositions$get;
-          return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
-        }, [], DecorationSet.create(node, []));
-        addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
-        return {
-          dom: nodeViewInstance.dom,
-          // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
-          contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
-        };
-      }];
-    }));
+      // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
+      // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
+      //
+      // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
+      // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
+      // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
+      // we are rendering child node.
+      //
+      // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
+      // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
+      // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
+      const addTrailingBreakIfNeeded = (node, contentDOM) => {
+        if (contentDOM && node.isTextblock && !node.lastChild) {
+          const br = document.createElement('br');
+          br.classList.add('ProseMirror-trailingBreak');
+          contentDOM.appendChild(br);
+        }
+      };
+      const toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(([nodeName, nodeType]) => {
+        return [nodeName, nodeType.spec.toDOM];
+      }).filter(([, toDOM]) => !!toDOM));
+      const toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(([markName, markType]) => {
+        return [markName, markType.spec.toDOM];
+      }).filter(([, toDOM]) => !!toDOM));
+      const nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(([nodeName, nodeViewFactory]) => {
+        return [nodeName, node => {
+          const nodeViewInstance = nodeViewFactory(node, editorView, () => {
+            var _nodePositions$get;
+            return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
+          }, [], DecorationSet.create(node, []));
+          addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
+          return {
+            dom: nodeViewInstance.dom,
+            // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
+            contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
+          };
+        }];
+      }));
 
-    // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
-    const textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(([nodeName, nodeType]) => {
-      // Only handle textblock nodes
-      return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
-    }).map(([nodeName, nodeType]) => {
-      const toDOM = nodeType.spec.toDOM;
-      if (!toDOM) {
-        return [nodeName, undefined];
-      }
-      return [nodeName, node => {
-        if (!node.lastChild) {
-          const result = DOMSerializer.renderSpec(document, toDOM(node));
-          addTrailingBreakIfNeeded(node, result.contentDOM);
-          return result;
+      // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
+      const textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(([nodeName, nodeType]) => {
+        // Only handle textblock nodes
+        return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
+      }).map(([nodeName, nodeType]) => {
+        const toDOM = nodeType.spec.toDOM;
+        if (!toDOM) {
+          return [nodeName, undefined];
         }
-        return toDOM(node);
-      }];
-    }).filter(([, renderer]) => !!renderer));
-    const markViewRenderers = Object.fromEntries(Object.entries(markViews).map(([markName, markViewFactory]) => {
-      return [markName, mark => {
-        const markViewInstance = markViewFactory(mark, editorView, false);
-        return {
-          dom: markViewInstance.dom,
-          contentDOM: markViewInstance.contentDOM
-        };
-      }];
-    }));
-    const serializer = new DOMSerializer({
-      ...toDomNodeRenderers,
-      ...textblockRenderers,
-      ...nodeViewRenderers,
-      text: renderText
-    }, {
-      ...toDomMarkRenderers,
-      ...markViewRenderers
-    });
-    return {
-      serializer,
-      nodePositions
+        return [nodeName, node => {
+          if (!node.lastChild) {
+            const result = DOMSerializer.renderSpec(document, toDOM(node));
+            addTrailingBreakIfNeeded(node, result.contentDOM);
+            return result;
+          }
+          return toDOM(node);
+        }];
+      }).filter(([, renderer]) => !!renderer));
+      const markViewRenderers = Object.fromEntries(Object.entries(markViews).map(([markName, markViewFactory]) => {
+        return [markName, mark => {
+          const markViewInstance = markViewFactory(mark, editorView, false);
+          return {
+            dom: markViewInstance.dom,
+            contentDOM: markViewInstance.contentDOM
+          };
+        }];
+      }));
+      const serializer = new DOMSerializer({
+        ...toDomNodeRenderers,
+        ...textblockRenderers,
+        ...nodeViewRenderers,
+        text: renderText
+      }, {
+        ...toDomMarkRenderers,
+        ...markViewRenderers
+      });
+      return {
+        serializer,
+        nodePositions
+      };
     };
-  }, [editorView, markViews, nodeViews, schema.marks, schema.nodes]);
+    return fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation(`${SSR_TRACE_SEGMENT_NAME}/createSerializerAndNodePositions`, createSerializerAndNodePositions, onSSRMeasure) : createSerializerAndNodePositions();
+  }, [editorView, markViews, nodeViews, schema.marks, schema.nodes, onSSRMeasure]);
   const editorHTML = useMemo(() => {
-    if (!doc) {
-      return undefined;
-    }
-    try {
+    const serializeFragment = () => {
+      if (!doc) {
+        return undefined;
+      }
       doc.descendants((node, pos) => {
         nodePositions.set(node, pos);
       });
       return serializer.serializeFragment(doc.content);
+    };
+    try {
+      return fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation(`${SSR_TRACE_SEGMENT_NAME}/serializeFragment`, serializeFragment, onSSRMeasure) : serializeFragment();
     } catch {
       return undefined;
     }
-  }, [doc, serializer, nodePositions]);
+  }, [doc, serializer, nodePositions, onSSRMeasure]);
   const containerRef = useRef(null);
   useLayoutEffect(() => {
     if (containerRef.current && editorHTML) {
@@ -284,7 +303,11 @@ export function EditorSSRRenderer({
       containerRef.current.appendChild(editorHTML);
     }
   }, [editorHTML]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(SSRRenderMeasure, {
+    segmentName: SSR_TRACE_SEGMENT_NAME,
+    startTimestampRef: firstRenderStartTimestampRef,
+    onSSRMeasure: fg('platform_editor_better_editor_ssr_spans') ? onSSRMeasure : undefined
+  }, /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: divProps.id
     // For some reason on SSR, the result `class` has a trailing space, that broke UFO,
@@ -305,7 +328,7 @@ export function EditorSSRRenderer({
     contenteditable: "true",
     "data-gramm": "false",
     translate: "no"
-  });
+  }));
 }
 function renderText(node) {
   return node.text || '';

package/dist/esm/editor-ssr-renderer/EditorSSRRenderer.js

@@ -6,7 +6,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl", "onEditorStateChanged"];
+var _excluded = ["plugins", "schema", "doc", "portalProviderAPI", "intl", "onSSRMeasure", "onEditorStateChanged"];
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -18,6 +18,9 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { EventDispatcher, createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { profileSSROperation, SSRRenderMeasure } from '@atlaskit/editor-common/performance/ssr-measures';
+var SSR_TRACE_SEGMENT_NAME = 'reactEditorView/editorSSRRenderer';
 
 // The copy of type from prosemirror-view.
 // Probably, we need to fix this package exports and add `NodeViewConstructor` and `MarkViewConstructor` types here.
@@ -171,43 +174,50 @@ export function EditorSSRRenderer(_ref) {
     doc = _ref.doc,
     portalProviderAPI = _ref.portalProviderAPI,
     intl = _ref.intl,
+    onSSRMeasure = _ref.onSSRMeasure,
     onEditorStateChanged = _ref.onEditorStateChanged,
     divProps = _objectWithoutProperties(_ref, _excluded);
+  // Should be always the first statement in the component
+  var firstRenderStartTimestampRef = useRef(performance.now());
+
   // PMPluginFactoryParams use `getIntl` function to get current intl instance,
   // so we don't need to add `intl` as a dependency to `useMemo`.
   // We will store intl in ref and access to it dynamically in `getIntl` function call.
   var intlRef = useRef(intl);
   intlRef.current = intl;
   var pmPlugins = useMemo(function () {
-    var eventDispatcher = new SSREventDispatcher();
-    var providerFactory = new ProviderFactory();
-    var pmPluginFactoryParams = {
-      dispatch: createDispatch(eventDispatcher),
-      dispatchAnalyticsEvent: function dispatchAnalyticsEvent() {},
-      eventDispatcher: eventDispatcher,
-      featureFlags: {},
-      getIntl: function getIntl() {
-        return intlRef.current;
-      },
-      nodeViewPortalProviderAPI: portalProviderAPI,
-      portalProviderAPI: portalProviderAPI,
-      providerFactory: providerFactory,
-      schema: schema
+    var createPMPlugins = function createPMPlugins() {
+      var eventDispatcher = new SSREventDispatcher();
+      var providerFactory = new ProviderFactory();
+      var pmPluginFactoryParams = {
+        dispatch: createDispatch(eventDispatcher),
+        dispatchAnalyticsEvent: function dispatchAnalyticsEvent() {},
+        eventDispatcher: eventDispatcher,
+        featureFlags: {},
+        getIntl: function getIntl() {
+          return intlRef.current;
+        },
+        nodeViewPortalProviderAPI: portalProviderAPI,
+        portalProviderAPI: portalProviderAPI,
+        providerFactory: providerFactory,
+        schema: schema
+      };
+      return plugins.reduce(function (acc, editorPlugin) {
+        var _editorPlugin$pmPlugi;
+        (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 || _editorPlugin$pmPlugi.call(editorPlugin).forEach(function (_ref2) {
+          var plugin = _ref2.plugin;
+          try {
+            var pmPlugin = plugin(pmPluginFactoryParams);
+            if (pmPlugin) {
+              acc.push(pmPlugin);
+            }
+          } catch (_unused) {}
+        });
+        return acc;
+      }, []);
     };
-    return plugins.reduce(function (acc, editorPlugin) {
-      var _editorPlugin$pmPlugi;
-      (_editorPlugin$pmPlugi = editorPlugin.pmPlugins) === null || _editorPlugin$pmPlugi === void 0 || _editorPlugin$pmPlugi.call(editorPlugin).forEach(function (_ref2) {
-        var plugin = _ref2.plugin;
-        try {
-          var pmPlugin = plugin(pmPluginFactoryParams);
-          if (pmPlugin) {
-            acc.push(pmPlugin);
-          }
-        } catch (_unused) {}
-      });
-      return acc;
-    }, []);
-  }, [plugins, portalProviderAPI, schema]);
+    return fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/createPMPlugins"), createPMPlugins, onSSRMeasure) : createPMPlugins();
+  }, [plugins, portalProviderAPI, schema, onSSRMeasure]);
   var nodeViews = useMemo(function () {
     return pmPlugins.reduce(function (acc, plugin) {
       return Object.assign(acc, plugin.props.nodeViews);
@@ -219,12 +229,15 @@ export function EditorSSRRenderer(_ref) {
     }, {});
   }, [pmPlugins]);
   var editorState = useMemo(function () {
-    return EditorState.create({
-      doc: doc,
-      schema: schema,
-      plugins: pmPlugins
-    });
-  }, [doc, pmPlugins, schema]);
+    var createEditorState = function createEditorState() {
+      return EditorState.create({
+        doc: doc,
+        schema: schema,
+        plugins: pmPlugins
+      });
+    };
+    return fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/createEditorState"), createEditorState, onSSRMeasure) : createEditorState();
+  }, [doc, pmPlugins, schema, onSSRMeasure]);
 
   // In React 19 could be replaced by `useEffectEvent` hook.
   var onEditorStateChangedRef = useRef(onEditorStateChanged);
@@ -239,127 +252,133 @@ export function EditorSSRRenderer(_ref) {
     });
   }, [editorState]);
   var _useMemo = useMemo(function () {
-      var nodePositions = new WeakMap();
+      var createSerializerAndNodePositions = function createSerializerAndNodePositions() {
+        var nodePositions = new WeakMap();
 
-      // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
-      // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
-      //
-      // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
-      // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
-      // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
-      // we are rendering child node.
-      //
-      // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
-      // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
-      // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
-      var addTrailingBreakIfNeeded = function addTrailingBreakIfNeeded(node, contentDOM) {
-        if (contentDOM && node.isTextblock && !node.lastChild) {
-          var br = document.createElement('br');
-          br.classList.add('ProseMirror-trailingBreak');
-          contentDOM.appendChild(br);
-        }
-      };
-      var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          nodeName = _ref4[0],
-          nodeType = _ref4[1];
-        return [nodeName, nodeType.spec.toDOM];
-      }).filter(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-          toDOM = _ref6[1];
-        return !!toDOM;
-      }));
-      var toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(function (_ref7) {
-        var _ref8 = _slicedToArray(_ref7, 2),
-          markName = _ref8[0],
-          markType = _ref8[1];
-        return [markName, markType.spec.toDOM];
-      }).filter(function (_ref9) {
-        var _ref0 = _slicedToArray(_ref9, 2),
-          toDOM = _ref0[1];
-        return !!toDOM;
-      }));
-      var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
-        var _ref10 = _slicedToArray(_ref1, 2),
-          nodeName = _ref10[0],
-          nodeViewFactory = _ref10[1];
-        return [nodeName, function (node) {
-          var nodeViewInstance = nodeViewFactory(node, editorView, function () {
-            var _nodePositions$get;
-            return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
-          }, [], DecorationSet.create(node, []));
-          addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
-          return {
-            dom: nodeViewInstance.dom,
-            // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
-            contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
-          };
-        }];
-      }));
+        // ProseMirror View adds <br class="ProseMirror-trailingBreak" /> to empty nodes. Because we are using
+        // DOMSerializer, we should simulate the same behaviour to get the same HTML document.
+        //
+        // There are a lot of conditions that check for adding `<br />` but we could implement only the case when we
+        // are adding `<br />` to empty texblock, because if we add `<br />` in other cases it will change order of DOM nodes inside
+        // this node (`<br />`) will be the first, after will be other nodes. It's because we are adding `<br />` to root node before
+        // we are rendering child node.
+        //
+        // See: https://discuss.prosemirror.net/t/where-can-i-read-about-prosemirror-trailingbreak/6665
+        // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L803
+        // See: https://github.com/ProseMirror/prosemirror-view/blob/76c7c47f03730b18397b94bd269ece8a9cb7f486/src/viewdesc.ts#L1365
+        var addTrailingBreakIfNeeded = function addTrailingBreakIfNeeded(node, contentDOM) {
+          if (contentDOM && node.isTextblock && !node.lastChild) {
+            var br = document.createElement('br');
+            br.classList.add('ProseMirror-trailingBreak');
+            contentDOM.appendChild(br);
+          }
+        };
+        var toDomNodeRenderers = Object.fromEntries(Object.entries(schema.nodes).map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            nodeName = _ref4[0],
+            nodeType = _ref4[1];
+          return [nodeName, nodeType.spec.toDOM];
+        }).filter(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            toDOM = _ref6[1];
+          return !!toDOM;
+        }));
+        var toDomMarkRenderers = Object.fromEntries(Object.entries(schema.marks).map(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+            markName = _ref8[0],
+            markType = _ref8[1];
+          return [markName, markType.spec.toDOM];
+        }).filter(function (_ref9) {
+          var _ref0 = _slicedToArray(_ref9, 2),
+            toDOM = _ref0[1];
+          return !!toDOM;
+        }));
+        var nodeViewRenderers = Object.fromEntries(Object.entries(nodeViews).map(function (_ref1) {
+          var _ref10 = _slicedToArray(_ref1, 2),
+            nodeName = _ref10[0],
+            nodeViewFactory = _ref10[1];
+          return [nodeName, function (node) {
+            var nodeViewInstance = nodeViewFactory(node, editorView, function () {
+              var _nodePositions$get;
+              return (_nodePositions$get = nodePositions.get(node)) !== null && _nodePositions$get !== void 0 ? _nodePositions$get : 0;
+            }, [], DecorationSet.create(node, []));
+            addTrailingBreakIfNeeded(node, nodeViewInstance.contentDOM);
+            return {
+              dom: nodeViewInstance.dom,
+              // Leaf nodes have no content, ProseMirror will throw an error if we pass contentDOM
+              contentDOM: node.isLeaf ? undefined : nodeViewInstance.contentDOM
+            };
+          }];
+        }));
 
-      // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
-      var textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(function (_ref11) {
-        var _ref12 = _slicedToArray(_ref11, 2),
-          nodeName = _ref12[0],
-          nodeType = _ref12[1];
-        // Only handle textblock nodes
-        return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
-      }).map(function (_ref13) {
-        var _ref14 = _slicedToArray(_ref13, 2),
-          nodeName = _ref14[0],
-          nodeType = _ref14[1];
-        var toDOM = nodeType.spec.toDOM;
-        if (!toDOM) {
-          return [nodeName, undefined];
-        }
-        return [nodeName, function (node) {
-          if (!node.lastChild) {
-            var result = DOMSerializer.renderSpec(document, toDOM(node));
-            addTrailingBreakIfNeeded(node, result.contentDOM);
-            return result;
+        // Create renderers for textblock nodes that don't have custom NodeViews (e.g. paragraph, heading)
+        var textblockRenderers = Object.fromEntries(Object.entries(schema.nodes).filter(function (_ref11) {
+          var _ref12 = _slicedToArray(_ref11, 2),
+            nodeName = _ref12[0],
+            nodeType = _ref12[1];
+          // Only handle textblock nodes
+          return nodeType.spec.toDOM && nodeType.isTextblock && !nodeViews[nodeName];
+        }).map(function (_ref13) {
+          var _ref14 = _slicedToArray(_ref13, 2),
+            nodeName = _ref14[0],
+            nodeType = _ref14[1];
+          var toDOM = nodeType.spec.toDOM;
+          if (!toDOM) {
+            return [nodeName, undefined];
           }
-          return toDOM(node);
-        }];
-      }).filter(function (_ref15) {
-        var _ref16 = _slicedToArray(_ref15, 2),
-          renderer = _ref16[1];
-        return !!renderer;
-      }));
-      var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref17) {
-        var _ref18 = _slicedToArray(_ref17, 2),
-          markName = _ref18[0],
-          markViewFactory = _ref18[1];
-        return [markName, function (mark) {
-          var markViewInstance = markViewFactory(mark, editorView, false);
-          return {
-            dom: markViewInstance.dom,
-            contentDOM: markViewInstance.contentDOM
-          };
-        }];
-      }));
-      var serializer = new DOMSerializer(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), textblockRenderers), nodeViewRenderers), {}, {
-        text: renderText
-      }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
-      return {
-        serializer: serializer,
-        nodePositions: nodePositions
+          return [nodeName, function (node) {
+            if (!node.lastChild) {
+              var result = DOMSerializer.renderSpec(document, toDOM(node));
+              addTrailingBreakIfNeeded(node, result.contentDOM);
+              return result;
+            }
+            return toDOM(node);
+          }];
+        }).filter(function (_ref15) {
+          var _ref16 = _slicedToArray(_ref15, 2),
+            renderer = _ref16[1];
+          return !!renderer;
+        }));
+        var markViewRenderers = Object.fromEntries(Object.entries(markViews).map(function (_ref17) {
+          var _ref18 = _slicedToArray(_ref17, 2),
+            markName = _ref18[0],
+            markViewFactory = _ref18[1];
+          return [markName, function (mark) {
+            var markViewInstance = markViewFactory(mark, editorView, false);
+            return {
+              dom: markViewInstance.dom,
+              contentDOM: markViewInstance.contentDOM
+            };
+          }];
+        }));
+        var serializer = new DOMSerializer(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, toDomNodeRenderers), textblockRenderers), nodeViewRenderers), {}, {
+          text: renderText
+        }), _objectSpread(_objectSpread({}, toDomMarkRenderers), markViewRenderers));
+        return {
+          serializer: serializer,
+          nodePositions: nodePositions
+        };
       };
-    }, [editorView, markViews, nodeViews, schema.marks, schema.nodes]),
+      return fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/createSerializerAndNodePositions"), createSerializerAndNodePositions, onSSRMeasure) : createSerializerAndNodePositions();
+    }, [editorView, markViews, nodeViews, schema.marks, schema.nodes, onSSRMeasure]),
     serializer = _useMemo.serializer,
     nodePositions = _useMemo.nodePositions;
   var editorHTML = useMemo(function () {
-    if (!doc) {
-      return undefined;
-    }
-    try {
+    var serializeFragment = function serializeFragment() {
+      if (!doc) {
+        return undefined;
+      }
       doc.descendants(function (node, pos) {
         nodePositions.set(node, pos);
       });
       return serializer.serializeFragment(doc.content);
+    };
+    try {
+      return fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/serializeFragment"), serializeFragment, onSSRMeasure) : serializeFragment();
     } catch (_unused2) {
       return undefined;
     }
-  }, [doc, serializer, nodePositions]);
+  }, [doc, serializer, nodePositions, onSSRMeasure]);
   var containerRef = useRef(null);
   useLayoutEffect(function () {
     if (containerRef.current && editorHTML) {
@@ -367,7 +386,11 @@ export function EditorSSRRenderer(_ref) {
       containerRef.current.appendChild(editorHTML);
     }
   }, [editorHTML]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(SSRRenderMeasure, {
+    segmentName: SSR_TRACE_SEGMENT_NAME,
+    startTimestampRef: firstRenderStartTimestampRef,
+    onSSRMeasure: fg('platform_editor_better_editor_ssr_spans') ? onSSRMeasure : undefined
+  }, /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: divProps.id
     // For some reason on SSR, the result `class` has a trailing space, that broke UFO,
@@ -388,7 +411,7 @@ export function EditorSSRRenderer(_ref) {
     contenteditable: "true",
     "data-gramm": "false",
     translate: "no"
-  });
+  }));
 }
 function renderText(node) {
   return node.text || '';

package/dist/types/editor-ssr-renderer/EditorSSRRenderer.d.ts

@@ -14,9 +14,14 @@ interface Props {
     id: string;
     intl: IntlShape;
     onEditorStateChanged?: (state: EditorState) => void;
+    onSSRMeasure?: (measure: {
+        endTimestamp: number;
+        segmentName: string;
+        startTimestamp: number;
+    }) => void;
     plugins: EditorPlugin[];
     portalProviderAPI: PortalProviderAPI;
     schema: Schema;
 }
-export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, onEditorStateChanged, ...divProps }: Props): React.JSX.Element;
+export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, onSSRMeasure, onEditorStateChanged, ...divProps }: Props): React.JSX.Element;
 export {};

package/dist/types-ts4.5/editor-ssr-renderer/EditorSSRRenderer.d.ts

@@ -14,9 +14,14 @@ interface Props {
     id: string;
     intl: IntlShape;
     onEditorStateChanged?: (state: EditorState) => void;
+    onSSRMeasure?: (measure: {
+        endTimestamp: number;
+        segmentName: string;
+        startTimestamp: number;
+    }) => void;
     plugins: EditorPlugin[];
     portalProviderAPI: PortalProviderAPI;
     schema: Schema;
 }
-export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, onEditorStateChanged, ...divProps }: Props): React.JSX.Element;
+export declare function EditorSSRRenderer({ plugins, schema, doc, portalProviderAPI, intl, onSSRMeasure, onEditorStateChanged, ...divProps }: Props): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-ssr-renderer",
-	"version": "2.1.7",
+	"version": "2.2.1",
 	"description": "SSR Renderer based on Editor",
 	"author": "Atlassian Pty Ltd",
 	"atlassian": {
@@ -29,12 +29,18 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.5.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
-		"@atlaskit/tmp-editor-statsig": "^26.0.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/tmp-editor-statsig": "^27.1.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
 		"@atlaskit/editor-common": "^111.16.0",
 		"react": "^18.2.0"
+	},
+	"platform-feature-flags": {
+		"platform_editor_better_editor_ssr_spans": {
+			"type": "boolean"
+		}
 	}
 }