@atlaskit/editor-core 216.10.1 → 216.11.3

package/dist/es2019/create-editor/ReactEditorView.js

@@ -6,10 +6,12 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, PLATFORMS } fro
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { createDispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { useConstructor, usePreviousState } from '@atlaskit/editor-common/hooks';
+import { isPerformanceAPIAvailable } from '@atlaskit/editor-common/is-performance-api-available';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
 import { measureRender } from '@atlaskit/editor-common/performance/measure-render';
-import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
+import { getRequestToResponseTime, getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
+import { profileSSROperation, SSRRenderMeasure } from '@atlaskit/editor-common/performance/ssr-measures';
 import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
 import { processRawValue, processRawValueWithoutValidation } from '@atlaskit/editor-common/process-raw-value';
 import { ReactEditorViewContext } from '@atlaskit/editor-common/ui-react';
@@ -19,12 +21,14 @@ import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemir
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { EditorSSRRenderer } from '@atlaskit/editor-ssr-renderer';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getInteractionId } from '@atlaskit/react-ufo/interaction-id-context';
 import { abortAll, getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { useProviders } from '../composable-editor/hooks/useProviders';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import { getNodesCount } from '../utils/getNodesCount';
+import { getNodesCountWithExtensionKeys } from '../utils/getNodesCountWithExtensionKeys';
 import { getNodesVisibleInViewport } from '../utils/getNodesVisibleInViewport';
 import { isChromeless } from '../utils/is-chromeless';
 import { isFullPage } from '../utils/is-full-page';
@@ -41,11 +45,16 @@ import { handleEditorFocus } from './ReactEditorView/handleEditorFocus';
 import { useDispatchTransaction } from './ReactEditorView/useDispatchTransaction';
 import { useFireFullWidthEvent } from './ReactEditorView/useFireFullWidthEvent';
 const EDIT_AREA_ID = 'ak-editor-textarea';
+const SSR_TRACE_SEGMENT_NAME = 'reactEditorView';
+const bootStartTime = isPerformanceAPIAvailable() ? performance.now() : undefined;
 export function ReactEditorView(props) {
   var _pluginInjectionAPI$c, _pluginInjectionAPI$c2, _pluginInjectionAPI$c3, _media, _linking, _linking$smartLinks, _document$querySelect, _props$render, _props$render2;
+  // Should be always the first statement in the component
+  const firstRenderStartTimestampRef = useRef(performance.now());
   const {
     preset,
     editorProps: {
+      onSSRMeasure,
       appearance: nextAppearance,
       disabled,
       featureFlags: editorPropFeatureFlags,
@@ -440,9 +449,11 @@ export function ReactEditorView(props) {
     }) => {
       const proseMirrorRenderedSeverity = getAnalyticsEventSeverity(duration, PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD);
       if (viewRef.current) {
-        var _pluginInjectionAPI$c4;
-        const nodes = getNodesCount(viewRef.current.state.doc);
+        var _nodesAndExtensionKey, _pluginInjectionAPI$c4;
+        const nodesAndExtensionKeys = expValEquals('platform_editor_prosemirror_rendered_data', 'isEnabled', true) ? getNodesCountWithExtensionKeys(viewRef.current.state.doc) : undefined;
+        const nodes = (_nodesAndExtensionKey = nodesAndExtensionKeys === null || nodesAndExtensionKeys === void 0 ? void 0 : nodesAndExtensionKeys.nodes) !== null && _nodesAndExtensionKey !== void 0 ? _nodesAndExtensionKey : getNodesCount(viewRef.current.state.doc);
         const ttfb = getResponseEndTime();
+        const requestToResponseTime = getRequestToResponseTime();
         const contextIdentifier = (_pluginInjectionAPI$c4 = pluginInjectionAPI.current.api().base) === null || _pluginInjectionAPI$c4 === void 0 ? void 0 : _pluginInjectionAPI$c4.sharedState.currentState();
         const nodesInViewport = getNodesVisibleInViewport(viewRef.current.dom);
         const nodeSize = viewRef.current.state.doc.nodeSize;
@@ -469,10 +480,51 @@ export function ReactEditorView(props) {
             }
           })()
         } : {};
-        dispatchAnalyticsEvent({
-          action: ACTION.PROSEMIRROR_RENDERED,
-          actionSubject: ACTION_SUBJECT.EDITOR,
-          attributes: {
+        if (expValEquals('platform_editor_prosemirror_rendered_data', 'isEnabled', true)) {
+          var _nodesAndExtensionKey2;
+          const extensionKeys = (_nodesAndExtensionKey2 = nodesAndExtensionKeys === null || nodesAndExtensionKeys === void 0 ? void 0 : nodesAndExtensionKeys.extensionKeys) !== null && _nodesAndExtensionKey2 !== void 0 ? _nodesAndExtensionKey2 : {};
+          const interaction = getActiveInteraction();
+          const pageLoadType = interaction === null || interaction === void 0 ? void 0 : interaction.type;
+          const pageType = interaction === null || interaction === void 0 ? void 0 : interaction.routeName;
+          const timings = (() => {
+            if (requestToResponseTime === undefined && bootStartTime === undefined) {
+              return undefined;
+            }
+            const timingValues = {};
+            if (requestToResponseTime !== undefined) {
+              timingValues['requestStart->responseEnd'] = Math.round(requestToResponseTime);
+            }
+            if (bootStartTime !== undefined) {
+              timingValues.bootToRender = Math.round(startTime - bootStartTime);
+            }
+            return timingValues;
+          })();
+          const attributes = {
+            duration,
+            startTime,
+            nodes,
+            nodesInViewport,
+            nodeSize,
+            nodeSizeBucket,
+            totalNodes,
+            ttfb,
+            severity: proseMirrorRenderedSeverity,
+            objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
+            distortedDuration,
+            pageLoadType,
+            pageType,
+            timings,
+            extensionKeys,
+            ufoInteractionId: getInteractionId().current
+          };
+          dispatchAnalyticsEvent({
+            action: ACTION.PROSEMIRROR_RENDERED,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            attributes,
+            eventType: EVENT_TYPE.OPERATIONAL
+          });
+        } else {
+          const attributes = {
             duration,
             startTime,
             nodes,
@@ -484,9 +536,14 @@ export function ReactEditorView(props) {
             severity: proseMirrorRenderedSeverity,
             objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
             distortedDuration
-          },
-          eventType: EVENT_TYPE.OPERATIONAL
-        });
+          };
+          dispatchAnalyticsEvent({
+            action: ACTION.PROSEMIRROR_RENDERED,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            attributes,
+            eventType: EVENT_TYPE.OPERATIONAL
+          });
+        }
       }
     });
     pluginInjectionAPI.current.onEditorViewUpdated({
@@ -728,20 +785,23 @@ export function ReactEditorView(props) {
     if (!isSSR() || !expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
       return null;
     }
-    const plugins = createPluginsList(props.preset,
+    const doCreatePluginList = () => createPluginsList(props.preset,
     // Don't pass props.editorProps directly, because editoProps in the dependency will lead to
     // multiple repaints, because props.editorPros is not stable object.
     {
       allowBlockType
     }, pluginInjectionAPI.current);
-    const schema = createSchema(processPluginsList(plugins));
-    const doc = buildDoc(schema);
+    const plugins = fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation(`${SSR_TRACE_SEGMENT_NAME}/createPluginsList`, doCreatePluginList, onSSRMeasure) : doCreatePluginList();
+    const doCreateSchema = () => createSchema(processPluginsList(plugins));
+    const schema = fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation(`${SSR_TRACE_SEGMENT_NAME}/createSchema`, doCreateSchema, onSSRMeasure) : doCreateSchema();
+    const doBuildDoc = () => buildDoc(schema);
+    const doc = fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation(`${SSR_TRACE_SEGMENT_NAME}/buildDoc`, doBuildDoc, onSSRMeasure) : doBuildDoc();
     return {
       plugins,
       schema,
       doc
     };
-  }, [allowBlockType, buildDoc, props.preset]);
+  }, [allowBlockType, buildDoc, props.preset, onSSRMeasure]);
   const {
     assistiveLabel,
     assistiveDescribedBy
@@ -765,6 +825,7 @@ export function ReactEditorView(props) {
       id: EDIT_AREA_ID,
       "aria-describedby": assistiveDescribedBy,
       "data-editor-id": editorId.current,
+      onSSRMeasure: onSSRMeasure,
       onEditorStateChanged: state => {
         ssrEditorStateRef.current = state;
         // Notify listeners about the initial SSR state
@@ -774,7 +835,7 @@ export function ReactEditorView(props) {
         });
       }
     });
-  }, [ssrDeps, props.intl, props.portalProviderAPI, assistiveLabel, assistiveDescribedBy, isPageAppearance]);
+  }, [ssrDeps, props.intl, props.portalProviderAPI, assistiveLabel, isPageAppearance, assistiveDescribedBy, onSSRMeasure]);
   const editor = useMemo(() => {
     // SSR editor will be available only in SSR environment,
     // in a browser `ssrEditor` will be `null`, and we will render a normal one ProseMirror.
@@ -791,7 +852,11 @@ export function ReactEditorView(props) {
   // Render tracking is firing too many events in Jira so we are disabling them for now. See - https://product-fabric.atlassian.net/browse/ED-25616
   // Also firing too many events for the legacy content macro, so disabling for now. See - https://product-fabric.atlassian.net/browse/ED-26650
   const renderTrackingEnabled = !fg('platform_editor_disable_rerender_tracking_jira') && !featureFlags.lcmPreventRenderTracking;
-  return /*#__PURE__*/React.createElement(ReactEditorViewContext.Provider, {
+  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(ReactEditorViewContext.Provider, {
     value: {
       editorRef: editorRef,
       editorView: viewRef.current,
@@ -812,7 +877,7 @@ export function ReactEditorView(props) {
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     editorRef: editorRef,
     editorAPI: expVal('platform_editor_no_state_plugin_injection_api', 'isEnabled', false) ? pluginInjectionAPI.current.api() : editorAPI
-  })) !== null && _props$render !== void 0 ? _props$render : editor : editor);
+  })) !== null && _props$render !== void 0 ? _props$render : editor : editor));
 }
 
 // Preserving exact type generated by TypeScript

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -8,6 +8,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { SSRRenderMeasure } from '@atlaskit/editor-common/performance/ssr-measures';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
@@ -19,6 +20,7 @@ import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 import { FullPageToolbarNext } from './FullPageToolbarNext';
 import { fullPageEditorWrapper } from './StyledComponents';
+const SSR_TRACE_SEGMENT_NAME = 'reactEditorView/fullPageAppearance';
 const useShowKeyline = contentAreaRef => {
   const [showKeyline, setShowKeyline] = useState(false);
   useEffect(() => {
@@ -55,6 +57,8 @@ const hasCustomComponents = components => {
 };
 export const FullPageEditor = props => {
   var _scrollContentContain, _toolbarDockingPositi, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
+  // Should be always the first statement in the component
+  const firstRenderStartTimestampRef = useRef(performance.now());
   const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
   const scrollContentContainerRef = useRef(null);
   const showKeyline = useShowKeyline(scrollContentContainerRef);
@@ -129,7 +133,11 @@ export const FullPageEditor = props => {
   }
   const isToolbarAIFCEnabled = Boolean(editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.toolbar);
   const popupsBoundariesElement = props.popupsBoundariesElement || (scrollContentContainerRef === null || scrollContentContainerRef === void 0 ? void 0 : (_scrollContentContain = scrollContentContainerRef.current) === null || _scrollContentContain === void 0 ? void 0 : _scrollContentContain.containerArea) || undefined;
-  return jsx(ContextPanelWidthProvider, null, jsx("div", {
+  return jsx(SSRRenderMeasure, {
+    segmentName: SSR_TRACE_SEGMENT_NAME,
+    startTimestampRef: firstRenderStartTimestampRef,
+    onSSRMeasure: fg('platform_editor_better_editor_ssr_spans') ? props.onSSRMeasure : undefined
+  }, jsx(ContextPanelWidthProvider, null, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     css: fullPageEditorWrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -206,5 +214,5 @@ export const FullPageEditor = props => {
     viewMode: state.editorViewMode,
     hasHadInteraction: hasHadInteraction,
     contentMode: props.contentMode
-  })));
+  }))));
 };

package/dist/es2019/utils/getNodesCount.js

@@ -1,3 +1,4 @@
+// When experiment platform_editor_prosemirror_rendered_data is removed, review whether this helper is still needed.
 export function getNodesCount(node) {
   const count = {};
   node.nodesBetween(0, node.nodeSize - 2, node => {

package/dist/es2019/utils/getNodesCountWithExtensionKeys.js

@@ -0,0 +1,26 @@
+/**
+ * Counts node types and extension keys in a single traversal.
+ * We exclude the end-of-doc token by iterating to nodeSize - 2,
+ * which matches the typical ProseMirror pattern for traversing all child nodes.
+ */
+export function getNodesCountWithExtensionKeys(node) {
+  const nodes = {};
+  const extensionKeys = {};
+  const extensionNodeNames = ['extension', 'bodiedExtension', 'inlineExtension', 'multiBodiedExtension'];
+  node.nodesBetween(0, node.nodeSize - 2, currentNode => {
+    var _currentNode$attrs;
+    nodes[currentNode.type.name] = (nodes[currentNode.type.name] || 0) + 1;
+    if (!extensionNodeNames.includes(currentNode.type.name)) {
+      return;
+    }
+    const extensionKey = (_currentNode$attrs = currentNode.attrs) === null || _currentNode$attrs === void 0 ? void 0 : _currentNode$attrs.extensionKey;
+    if (!extensionKey) {
+      return;
+    }
+    extensionKeys[extensionKey] = (extensionKeys[extensionKey] || 0) + 1;
+  });
+  return {
+    nodes,
+    extensionKeys
+  };
+}

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "216.10.0";
+export const version = "216.11.2";

package/dist/esm/composable-editor/editor-internal.js

@@ -125,6 +125,7 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
         minHeight: props.minHeight,
         onSave: props.onSave ? handleSave : undefined,
         onCancel: props.onCancel,
+        onSSRMeasure: props.onSSRMeasure,
         popupsMountPoint: props.popupsMountPoint,
         popupsBoundariesElement: props.popupsBoundariesElement,
         popupsScrollableElement: props.popupsScrollableElement,

package/dist/esm/composable-editor/hooks/useMemoEditorProps.js

@@ -87,6 +87,7 @@ export var useMemoEditorProps = function useMemoEditorProps(passedProps) {
       mention: passedProps.mention,
       mentionInsertDisplayName: passedProps.mentionInsertDisplayName,
       uploadErrorHandler: passedProps.uploadErrorHandler,
+      onSSRMeasure: passedProps.onSSRMeasure,
       waitForMediaUpload: passedProps.waitForMediaUpload,
       extensionHandlers: passedProps.extensionHandlers,
       allowTextColor: passedProps.allowTextColor,
@@ -111,7 +112,7 @@ export var useMemoEditorProps = function useMemoEditorProps(passedProps) {
     };
     var nextProps = _objectSpread(_objectSpread({}, defaultProps), allProps);
     return nextProps;
-  }, [passedProps.preset, passedProps.appearance, passedProps.contentMode, passedProps.contentComponents, passedProps.primaryToolbarIconBefore, passedProps.secondaryToolbarComponents, passedProps.persistScrollGutter, passedProps.quickInsert, passedProps.shouldFocus, passedProps.disabled, passedProps.contextPanel, passedProps.errorReporterHandler, passedProps.contentTransformerProvider, passedProps.maxHeight, passedProps.minHeight, passedProps.placeholder, passedProps.placeholderBracketHint, passedProps.performanceTracking, passedProps.inputSamplingLimit, passedProps.defaultValue, passedProps.assistiveLabel, passedProps.assistiveDescribedBy, passedProps.popupsMountPoint, passedProps.popupsBoundariesElement, passedProps.popupsScrollableElement, passedProps.editorActions, passedProps.onEditorReady, passedProps.onDestroy, passedProps.onChange, passedProps.onCancel, passedProps.extensionProviders, passedProps.UNSAFE_useAnalyticsContext, passedProps.useStickyToolbar, passedProps.featureFlags, passedProps.onSave, passedProps.sanitizePrivateContent, passedProps.media, passedProps.collabEdit, passedProps.primaryToolbarComponents, passedProps.allowUndoRedoButtons, passedProps.linking, passedProps.activityProvider, passedProps.searchProvider, passedProps.annotationProviders, passedProps.collabEditProvider, passedProps.presenceProvider, passedProps.emojiProvider, passedProps.taskDecisionProvider, passedProps.legacyImageUploadProvider, passedProps.mentionProvider, passedProps.autoformattingProvider, passedProps.macroProvider, passedProps.contextIdentifierProvider, passedProps.allowExpand, passedProps.allowNestedTasks, passedProps.allowBlockType, passedProps.allowTasksAndDecisions, passedProps.allowBreakout, passedProps.allowRule, passedProps.allowHelpDialog, passedProps.allowPanel, passedProps.allowExtension, passedProps.allowConfluenceInlineComment, passedProps.allowTemplatePlaceholders, passedProps.allowDate, passedProps.allowLayouts, passedProps.allowStatus, passedProps.allowTextAlignment, passedProps.allowIndentation, passedProps.showIndentationButtons, passedProps.allowFindReplace, passedProps.allowBorderMark, passedProps.allowFragmentMark, passedProps.autoScrollIntoView, passedProps.elementBrowser, passedProps.maxContentSize, passedProps.saveOnEnter, passedProps.feedbackInfo, passedProps.mention, passedProps.mentionInsertDisplayName, passedProps.uploadErrorHandler, passedProps.waitForMediaUpload, passedProps.extensionHandlers, passedProps.allowTextColor, passedProps.allowTables, passedProps.insertMenuItems, passedProps.UNSAFE_cards, passedProps.smartLinks, passedProps.allowAnalyticsGASV3, passedProps.codeBlock, passedProps.textFormatting, passedProps.__livePage, passedProps.AppearanceComponent, passedProps.skipValidation, passedProps.syncBlock, passedProps.syncedBlockProvider, passedProps.pasteWarningOptions]);
+  }, [passedProps.preset, passedProps.appearance, passedProps.contentMode, passedProps.contentComponents, passedProps.primaryToolbarIconBefore, passedProps.secondaryToolbarComponents, passedProps.persistScrollGutter, passedProps.quickInsert, passedProps.shouldFocus, passedProps.disabled, passedProps.contextPanel, passedProps.errorReporterHandler, passedProps.contentTransformerProvider, passedProps.maxHeight, passedProps.minHeight, passedProps.placeholder, passedProps.placeholderBracketHint, passedProps.performanceTracking, passedProps.inputSamplingLimit, passedProps.defaultValue, passedProps.assistiveLabel, passedProps.assistiveDescribedBy, passedProps.popupsMountPoint, passedProps.popupsBoundariesElement, passedProps.popupsScrollableElement, passedProps.editorActions, passedProps.onEditorReady, passedProps.onDestroy, passedProps.onChange, passedProps.onCancel, passedProps.onSSRMeasure, passedProps.extensionProviders, passedProps.UNSAFE_useAnalyticsContext, passedProps.useStickyToolbar, passedProps.featureFlags, passedProps.onSave, passedProps.sanitizePrivateContent, passedProps.media, passedProps.collabEdit, passedProps.primaryToolbarComponents, passedProps.allowUndoRedoButtons, passedProps.linking, passedProps.activityProvider, passedProps.searchProvider, passedProps.annotationProviders, passedProps.collabEditProvider, passedProps.presenceProvider, passedProps.emojiProvider, passedProps.taskDecisionProvider, passedProps.legacyImageUploadProvider, passedProps.mentionProvider, passedProps.autoformattingProvider, passedProps.macroProvider, passedProps.contextIdentifierProvider, passedProps.allowExpand, passedProps.allowNestedTasks, passedProps.allowBlockType, passedProps.allowTasksAndDecisions, passedProps.allowBreakout, passedProps.allowRule, passedProps.allowHelpDialog, passedProps.allowPanel, passedProps.allowExtension, passedProps.allowConfluenceInlineComment, passedProps.allowTemplatePlaceholders, passedProps.allowDate, passedProps.allowLayouts, passedProps.allowStatus, passedProps.allowTextAlignment, passedProps.allowIndentation, passedProps.showIndentationButtons, passedProps.allowFindReplace, passedProps.allowBorderMark, passedProps.allowFragmentMark, passedProps.autoScrollIntoView, passedProps.elementBrowser, passedProps.maxContentSize, passedProps.saveOnEnter, passedProps.feedbackInfo, passedProps.mention, passedProps.mentionInsertDisplayName, passedProps.uploadErrorHandler, passedProps.waitForMediaUpload, passedProps.extensionHandlers, passedProps.allowTextColor, passedProps.allowTables, passedProps.insertMenuItems, passedProps.UNSAFE_cards, passedProps.smartLinks, passedProps.allowAnalyticsGASV3, passedProps.codeBlock, passedProps.textFormatting, passedProps.__livePage, passedProps.AppearanceComponent, passedProps.skipValidation, passedProps.syncBlock, passedProps.syncedBlockProvider, passedProps.pasteWarningOptions]);
   return memodProps;
 };
 export default useMemoEditorProps;

package/dist/esm/create-editor/ReactEditorView.js

@@ -14,10 +14,12 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, PLATFORMS } fro
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { createDispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { useConstructor, usePreviousState } from '@atlaskit/editor-common/hooks';
+import { isPerformanceAPIAvailable } from '@atlaskit/editor-common/is-performance-api-available';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
 import { measureRender } from '@atlaskit/editor-common/performance/measure-render';
-import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
+import { getRequestToResponseTime, getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
+import { profileSSROperation, SSRRenderMeasure } from '@atlaskit/editor-common/performance/ssr-measures';
 import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
 import { processRawValue, processRawValueWithoutValidation } from '@atlaskit/editor-common/process-raw-value';
 import { ReactEditorViewContext } from '@atlaskit/editor-common/ui-react';
@@ -27,12 +29,14 @@ import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemir
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { EditorSSRRenderer } from '@atlaskit/editor-ssr-renderer';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getInteractionId } from '@atlaskit/react-ufo/interaction-id-context';
 import { abortAll, getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { useProviders } from '../composable-editor/hooks/useProviders';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import { getNodesCount } from '../utils/getNodesCount';
+import { getNodesCountWithExtensionKeys } from '../utils/getNodesCountWithExtensionKeys';
 import { getNodesVisibleInViewport } from '../utils/getNodesVisibleInViewport';
 import { isChromeless } from '../utils/is-chromeless';
 import { isFullPage } from '../utils/is-full-page';
@@ -49,10 +53,15 @@ import { handleEditorFocus } from './ReactEditorView/handleEditorFocus';
 import { useDispatchTransaction } from './ReactEditorView/useDispatchTransaction';
 import { useFireFullWidthEvent } from './ReactEditorView/useFireFullWidthEvent';
 var EDIT_AREA_ID = 'ak-editor-textarea';
+var SSR_TRACE_SEGMENT_NAME = 'reactEditorView';
+var bootStartTime = isPerformanceAPIAvailable() ? performance.now() : undefined;
 export function ReactEditorView(props) {
   var _pluginInjectionAPI$c, _media, _linking, _document$querySelect, _props$render, _props$render2;
+  // Should be always the first statement in the component
+  var firstRenderStartTimestampRef = useRef(performance.now());
   var preset = props.preset,
     _props$editorProps = props.editorProps,
+    onSSRMeasure = _props$editorProps.onSSRMeasure,
     nextAppearance = _props$editorProps.appearance,
     disabled = _props$editorProps.disabled,
     editorPropFeatureFlags = _props$editorProps.featureFlags,
@@ -458,9 +467,11 @@ export function ReactEditorView(props) {
         distortedDuration = _ref3.distortedDuration;
       var proseMirrorRenderedSeverity = getAnalyticsEventSeverity(duration, PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD);
       if (viewRef.current) {
-        var _pluginInjectionAPI$c2;
-        var nodes = getNodesCount(viewRef.current.state.doc);
+        var _nodesAndExtensionKey, _pluginInjectionAPI$c2;
+        var nodesAndExtensionKeys = expValEquals('platform_editor_prosemirror_rendered_data', 'isEnabled', true) ? getNodesCountWithExtensionKeys(viewRef.current.state.doc) : undefined;
+        var nodes = (_nodesAndExtensionKey = nodesAndExtensionKeys === null || nodesAndExtensionKeys === void 0 ? void 0 : nodesAndExtensionKeys.nodes) !== null && _nodesAndExtensionKey !== void 0 ? _nodesAndExtensionKey : getNodesCount(viewRef.current.state.doc);
         var ttfb = getResponseEndTime();
+        var requestToResponseTime = getRequestToResponseTime();
         var contextIdentifier = (_pluginInjectionAPI$c2 = pluginInjectionAPI.current.api().base) === null || _pluginInjectionAPI$c2 === void 0 ? void 0 : _pluginInjectionAPI$c2.sharedState.currentState();
         var nodesInViewport = getNodesVisibleInViewport(viewRef.current.dom);
         var nodeSize = viewRef.current.state.doc.nodeSize;
@@ -488,10 +499,51 @@ export function ReactEditorView(props) {
           } : {},
           totalNodes = _ref4.totalNodes,
           nodeSizeBucket = _ref4.nodeSizeBucket;
-        dispatchAnalyticsEvent({
-          action: ACTION.PROSEMIRROR_RENDERED,
-          actionSubject: ACTION_SUBJECT.EDITOR,
-          attributes: {
+        if (expValEquals('platform_editor_prosemirror_rendered_data', 'isEnabled', true)) {
+          var _nodesAndExtensionKey2;
+          var extensionKeys = (_nodesAndExtensionKey2 = nodesAndExtensionKeys === null || nodesAndExtensionKeys === void 0 ? void 0 : nodesAndExtensionKeys.extensionKeys) !== null && _nodesAndExtensionKey2 !== void 0 ? _nodesAndExtensionKey2 : {};
+          var interaction = getActiveInteraction();
+          var pageLoadType = interaction === null || interaction === void 0 ? void 0 : interaction.type;
+          var pageType = interaction === null || interaction === void 0 ? void 0 : interaction.routeName;
+          var timings = function () {
+            if (requestToResponseTime === undefined && bootStartTime === undefined) {
+              return undefined;
+            }
+            var timingValues = {};
+            if (requestToResponseTime !== undefined) {
+              timingValues['requestStart->responseEnd'] = Math.round(requestToResponseTime);
+            }
+            if (bootStartTime !== undefined) {
+              timingValues.bootToRender = Math.round(startTime - bootStartTime);
+            }
+            return timingValues;
+          }();
+          var attributes = {
+            duration: duration,
+            startTime: startTime,
+            nodes: nodes,
+            nodesInViewport: nodesInViewport,
+            nodeSize: nodeSize,
+            nodeSizeBucket: nodeSizeBucket,
+            totalNodes: totalNodes,
+            ttfb: ttfb,
+            severity: proseMirrorRenderedSeverity,
+            objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
+            distortedDuration: distortedDuration,
+            pageLoadType: pageLoadType,
+            pageType: pageType,
+            timings: timings,
+            extensionKeys: extensionKeys,
+            ufoInteractionId: getInteractionId().current
+          };
+          dispatchAnalyticsEvent({
+            action: ACTION.PROSEMIRROR_RENDERED,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            attributes: attributes,
+            eventType: EVENT_TYPE.OPERATIONAL
+          });
+        } else {
+          var _attributes = {
             duration: duration,
             startTime: startTime,
             nodes: nodes,
@@ -503,9 +555,14 @@ export function ReactEditorView(props) {
             severity: proseMirrorRenderedSeverity,
             objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
             distortedDuration: distortedDuration
-          },
-          eventType: EVENT_TYPE.OPERATIONAL
-        });
+          };
+          dispatchAnalyticsEvent({
+            action: ACTION.PROSEMIRROR_RENDERED,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            attributes: _attributes,
+            eventType: EVENT_TYPE.OPERATIONAL
+          });
+        }
       }
     });
     pluginInjectionAPI.current.onEditorViewUpdated({
@@ -769,20 +826,29 @@ export function ReactEditorView(props) {
     if (!isSSR() || !expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
       return null;
     }
-    var plugins = createPluginsList(props.preset,
-    // Don't pass props.editorProps directly, because editoProps in the dependency will lead to
-    // multiple repaints, because props.editorPros is not stable object.
-    {
-      allowBlockType: allowBlockType
-    }, pluginInjectionAPI.current);
-    var schema = createSchema(processPluginsList(plugins));
-    var doc = buildDoc(schema);
+    var doCreatePluginList = function doCreatePluginList() {
+      return createPluginsList(props.preset,
+      // Don't pass props.editorProps directly, because editoProps in the dependency will lead to
+      // multiple repaints, because props.editorPros is not stable object.
+      {
+        allowBlockType: allowBlockType
+      }, pluginInjectionAPI.current);
+    };
+    var plugins = fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/createPluginsList"), doCreatePluginList, onSSRMeasure) : doCreatePluginList();
+    var doCreateSchema = function doCreateSchema() {
+      return createSchema(processPluginsList(plugins));
+    };
+    var schema = fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/createSchema"), doCreateSchema, onSSRMeasure) : doCreateSchema();
+    var doBuildDoc = function doBuildDoc() {
+      return buildDoc(schema);
+    };
+    var doc = fg('platform_editor_better_editor_ssr_spans') ? profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/buildDoc"), doBuildDoc, onSSRMeasure) : doBuildDoc();
     return {
       plugins: plugins,
       schema: schema,
       doc: doc
     };
-  }, [allowBlockType, buildDoc, props.preset]);
+  }, [allowBlockType, buildDoc, props.preset, onSSRMeasure]);
   var _props$editorProps3 = props.editorProps,
     assistiveLabel = _props$editorProps3.assistiveLabel,
     assistiveDescribedBy = _props$editorProps3.assistiveDescribedBy;
@@ -805,6 +871,7 @@ export function ReactEditorView(props) {
       id: EDIT_AREA_ID,
       "aria-describedby": assistiveDescribedBy,
       "data-editor-id": editorId.current,
+      onSSRMeasure: onSSRMeasure,
       onEditorStateChanged: function onEditorStateChanged(state) {
         ssrEditorStateRef.current = state;
         // Notify listeners about the initial SSR state
@@ -814,7 +881,7 @@ export function ReactEditorView(props) {
         });
       }
     });
-  }, [ssrDeps, props.intl, props.portalProviderAPI, assistiveLabel, assistiveDescribedBy, isPageAppearance]);
+  }, [ssrDeps, props.intl, props.portalProviderAPI, assistiveLabel, isPageAppearance, assistiveDescribedBy, onSSRMeasure]);
   var editor = useMemo(function () {
     // SSR editor will be available only in SSR environment,
     // in a browser `ssrEditor` will be `null`, and we will render a normal one ProseMirror.
@@ -831,7 +898,11 @@ export function ReactEditorView(props) {
   // Render tracking is firing too many events in Jira so we are disabling them for now. See - https://product-fabric.atlassian.net/browse/ED-25616
   // Also firing too many events for the legacy content macro, so disabling for now. See - https://product-fabric.atlassian.net/browse/ED-26650
   var renderTrackingEnabled = !fg('platform_editor_disable_rerender_tracking_jira') && !featureFlags.lcmPreventRenderTracking;
-  return /*#__PURE__*/React.createElement(ReactEditorViewContext.Provider, {
+  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(ReactEditorViewContext.Provider, {
     value: {
       editorRef: editorRef,
       editorView: viewRef.current,
@@ -852,7 +923,7 @@ export function ReactEditorView(props) {
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     editorRef: editorRef,
     editorAPI: expVal('platform_editor_no_state_plugin_injection_api', 'isEnabled', false) ? pluginInjectionAPI.current.api() : editorAPI
-  })) !== null && _props$render !== void 0 ? _props$render : editor : editor);
+  })) !== null && _props$render !== void 0 ? _props$render : editor : editor));
 }
 
 // Preserving exact type generated by TypeScript

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -9,6 +9,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { SSRRenderMeasure } from '@atlaskit/editor-common/performance/ssr-measures';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
@@ -20,6 +21,7 @@ import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 import { FullPageToolbarNext } from './FullPageToolbarNext';
 import { fullPageEditorWrapper } from './StyledComponents';
+var SSR_TRACE_SEGMENT_NAME = 'reactEditorView/fullPageAppearance';
 var useShowKeyline = function useShowKeyline(contentAreaRef) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -61,6 +63,8 @@ var hasCustomComponents = function hasCustomComponents(components) {
 };
 export var FullPageEditor = function FullPageEditor(props) {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
+  // Should be always the first statement in the component
+  var firstRenderStartTimestampRef = useRef(performance.now());
   var wrapperElementRef = useMemo(function () {
     return props.innerRef;
   }, [props.innerRef]);
@@ -134,7 +138,11 @@ export var FullPageEditor = function FullPageEditor(props) {
   }
   var isToolbarAIFCEnabled = Boolean(editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.toolbar);
   var popupsBoundariesElement = props.popupsBoundariesElement || (scrollContentContainerRef === null || scrollContentContainerRef === void 0 || (_scrollContentContain = scrollContentContainerRef.current) === null || _scrollContentContain === void 0 ? void 0 : _scrollContentContain.containerArea) || undefined;
-  return jsx(ContextPanelWidthProvider, null, jsx("div", {
+  return jsx(SSRRenderMeasure, {
+    segmentName: SSR_TRACE_SEGMENT_NAME,
+    startTimestampRef: firstRenderStartTimestampRef,
+    onSSRMeasure: fg('platform_editor_better_editor_ssr_spans') ? props.onSSRMeasure : undefined
+  }, jsx(ContextPanelWidthProvider, null, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     css: fullPageEditorWrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -211,5 +219,5 @@ export var FullPageEditor = function FullPageEditor(props) {
     viewMode: state.editorViewMode,
     hasHadInteraction: hasHadInteraction,
     contentMode: props.contentMode
-  })));
+  }))));
 };

package/dist/esm/utils/getNodesCount.js

@@ -1,3 +1,4 @@
+// When experiment platform_editor_prosemirror_rendered_data is removed, review whether this helper is still needed.
 export function getNodesCount(node) {
   var count = {};
   node.nodesBetween(0, node.nodeSize - 2, function (node) {

package/dist/esm/utils/getNodesCountWithExtensionKeys.js

@@ -0,0 +1,26 @@
+/**
+ * Counts node types and extension keys in a single traversal.
+ * We exclude the end-of-doc token by iterating to nodeSize - 2,
+ * which matches the typical ProseMirror pattern for traversing all child nodes.
+ */
+export function getNodesCountWithExtensionKeys(node) {
+  var nodes = {};
+  var extensionKeys = {};
+  var extensionNodeNames = ['extension', 'bodiedExtension', 'inlineExtension', 'multiBodiedExtension'];
+  node.nodesBetween(0, node.nodeSize - 2, function (currentNode) {
+    var _currentNode$attrs;
+    nodes[currentNode.type.name] = (nodes[currentNode.type.name] || 0) + 1;
+    if (!extensionNodeNames.includes(currentNode.type.name)) {
+      return;
+    }
+    var extensionKey = (_currentNode$attrs = currentNode.attrs) === null || _currentNode$attrs === void 0 ? void 0 : _currentNode$attrs.extensionKey;
+    if (!extensionKey) {
+      return;
+    }
+    extensionKeys[extensionKey] = (extensionKeys[extensionKey] || 0) + 1;
+  });
+  return {
+    nodes: nodes,
+    extensionKeys: extensionKeys
+  };
+}

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "216.10.0";
+export var version = "216.11.2";

package/dist/types/create-editor/ReactEditorView.d.ts

@@ -29,6 +29,11 @@ export interface EditorViewProps extends WrappedComponentProps {
         transformer?: Transformer<string>;
         view: EditorView;
     }) => void;
+    onSSRMeasure?: (measure: {
+        endTimestamp: number;
+        segmentName: string;
+        startTimestamp: number;
+    }) => void;
     portalProviderAPI: PortalProviderAPI;
     preset: EditorPresetBuilder<string[], AllEditorPresetPluginTypes[]>;
     providerFactory: ProviderFactory;

package/dist/types/types/editor-appearance-component.d.ts

@@ -37,6 +37,11 @@ export interface EditorAppearanceComponentProps<Plugins extends NextEditorPlugin
     minHeight?: number;
     onCancel?: (editorView: EditorView) => void;
     onSave?: (editorView: EditorView) => void;
+    onSSRMeasure?: (measure: {
+        endTimestamp: number;
+        segmentName: string;
+        startTimestamp: number;
+    }) => void;
     persistScrollGutter?: boolean;
     pluginHooks?: ReactHookFactory[];
     popupsBoundariesElement?: HTMLElement;