@atlaskit/editor-core 221.8.3 → 221.9.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-core
 
+## 221.9.1
+
+### Patch Changes
+
+- [`c9c84b6b7437c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c9c84b6b7437c) -
+  refactor context panel styles
+
+## 221.9.0
+
+### Minor Changes
+
+- [`1f968eb29f086`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1f968eb29f086) -
+  Add editorDomSize (total editor DOM element count) to proseMirrorRendered, INP and UFO performance
+  events, gated behind the platform_editor_dom_node_count experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 221.8.3
 
 ### Patch Changes

package/dist/cjs/composable-editor/core-editor.js

@@ -53,6 +53,7 @@ function Editor(passedProps) {
   var editorActions = editorContext.editorActions || editorActionsPlaceholderInstance;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var editorViewRef = (0, _react.useRef)(null);
   var handleAnalyticsEvent = (0, _react.useCallback)(function (data) {
     (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)(data);
   }, [createAnalyticsEvent]);
@@ -67,6 +68,7 @@ function Editor(passedProps) {
       contextIdentifierProvider = _propsRef$current.contextIdentifierProvider,
       onEditorReady = _propsRef$current.onEditorReady,
       featureFlags = _propsRef$current.featureFlags;
+    editorViewRef.current = instance.view;
     editorActions._privateRegisterEditor(instance.view, instance.eventDispatcher, instance.transformer, getFeatureFlagsFromRef);
     if (onEditorReady) {
       (0, _performanceMeasures.startMeasure)(_measureEnum.default.ON_EDITOR_READY_CALLBACK);
@@ -79,6 +81,7 @@ function Editor(passedProps) {
   }, [editorActions, createAnalyticsEvent, getFeatureFlagsFromRef, propsRef]);
   var onEditorDestroyed = (0, _react.useCallback)(function (_instance) {
     var onDestroy = propsRef.current.onDestroy;
+    editorViewRef.current = null;
     editorActions._privateUnregisterEditor();
     if (onDestroy) {
       onDestroy();
@@ -93,7 +96,9 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   var isFullPageAppearance = Boolean(props.appearance && ['full-page', 'full-width'].concat((0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_synced_block', true) ? ['max'] : [])).includes(props.appearance));
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isFullPageAppearance ? /*#__PURE__*/_react.default.createElement(_editorInpMetrics.EditorINPMetrics, null) : null, /*#__PURE__*/_react.default.createElement(_editorInternal.EditorInternal, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isFullPageAppearance ? /*#__PURE__*/_react.default.createElement(_editorInpMetrics.EditorINPMetrics, {
+    editorViewRef: editorViewRef
+  }) : null, /*#__PURE__*/_react.default.createElement(_editorInternal.EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/cjs/composable-editor/editor-inp-metrics.js

@@ -11,18 +11,28 @@ var _useAnalyticsEvents = require("@atlaskit/analytics-next/useAnalyticsEvents")
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _inp = require("@atlaskit/editor-performance-metrics/inp");
 var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
-var EditorINPMetrics = exports.EditorINPMetrics = function EditorINPMetrics() {
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _getEditorDomSize = require("../utils/getEditorDomSize");
+var EditorINPMetrics = exports.EditorINPMetrics = function EditorINPMetrics(_ref) {
+  var editorViewRef = _ref.editorViewRef;
   var analyticsEvents = (0, _useAnalyticsEvents.useAnalyticsEvents)();
 
   // onMount lifecycle hook
   (0, _react.useEffect)(function () {
     var cleanupFn;
     var cleanupIdleCallback = createIdleCallback(function () {
-      cleanupFn = (0, _inp.setupINPTracking)(function (_ref) {
-        var value = _ref.value;
+      cleanupFn = (0, _inp.setupINPTracking)(function (_ref2) {
+        var value = _ref2.value;
         var interaction = (0, _interactionMetrics.getActiveInteraction)();
         var ufoName = interaction === null || interaction === void 0 ? void 0 : interaction.ufoName;
-        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName);
+        var editorDomSize;
+        if ((0, _expValEquals.expValEquals)('platform_editor_dom_node_count', 'isEnabled', true)) {
+          var editorView = editorViewRef.current;
+          if (editorView) {
+            editorDomSize = (0, _getEditorDomSize.getEditorDomSize)(editorView);
+          }
+        }
+        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName, editorDomSize);
       });
     });
 
@@ -40,7 +50,7 @@ var EditorINPMetrics = exports.EditorINPMetrics = function EditorINPMetrics() {
   // This component doesn't render anything
   return null;
 };
-var sendAnalytics = (0, _debounce.default)(function (createAnalyticsEvent, value, ufoName) {
+var sendAnalytics = (0, _debounce.default)(function (createAnalyticsEvent, value, ufoName, editorDomSize) {
   (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
     payload: {
       // @ts-expect-error Temporary data
@@ -49,7 +59,8 @@ var sendAnalytics = (0, _debounce.default)(function (createAnalyticsEvent, value
       eventType: _analytics.EVENT_TYPE.TRACK,
       attributes: {
         inp: value,
-        ufoName: ufoName
+        ufoName: ufoName,
+        editorDomSize: editorDomSize
       }
     }
   });

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

@@ -35,12 +35,14 @@ var _editorSsrRenderer = require("@atlaskit/editor-ssr-renderer");
 var _createSsrEditorState = require("@atlaskit/editor-ssr-renderer/create-ssr-editor-state");
 var _createSsrPmPlugins = require("@atlaskit/editor-ssr-renderer/create-ssr-pm-plugins");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _customData = require("@atlaskit/react-ufo/custom-data");
 var _interactionIdContext = require("@atlaskit/react-ufo/interaction-id-context");
 var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _useProviders = require("../composable-editor/hooks/useProviders");
 var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
+var _getEditorDomSize = require("../utils/getEditorDomSize");
 var _getNodesCountWithExtensionKeys = require("../utils/getNodesCountWithExtensionKeys");
 var _getNodesVisibleInViewport = require("../utils/getNodesVisibleInViewport");
 var _isChromeless = require("../utils/is-chromeless");
@@ -733,6 +735,7 @@ function ReactEditorView(props) {
           } : {},
           totalNodes = _ref4.totalNodes,
           nodeSizeBucket = _ref4.nodeSizeBucket;
+        var editorDomSize = (0, _expValEquals.expValEquals)('platform_editor_dom_node_count', 'isEnabled', true) ? (0, _getEditorDomSize.getEditorDomSize)(viewRef.current) : undefined;
         var interaction = (0, _interactionMetrics.getActiveInteraction)();
         var pageLoadType = interaction === null || interaction === void 0 ? void 0 : interaction.type;
         var pageType = interaction === null || interaction === void 0 ? void 0 : interaction.routeName;
@@ -757,6 +760,7 @@ function ReactEditorView(props) {
           nodeSize: nodeSize,
           nodeSizeBucket: nodeSizeBucket,
           totalNodes: totalNodes,
+          editorDomSize: editorDomSize,
           ttfb: ttfb,
           severity: proseMirrorRenderedSeverity,
           objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
@@ -767,6 +771,11 @@ function ReactEditorView(props) {
           extensionKeys: extensionKeys,
           ufoInteractionId: (0, _interactionIdContext.getInteractionId)().current
         };
+        if (editorDomSize !== undefined) {
+          (0, _customData.addUFOCustomData)({
+            editorDomSize: editorDomSize
+          });
+        }
         dispatchAnalyticsEvent({
           action: _analytics.ACTION.PROSEMIRROR_RENDERED,
           actionSubject: _analytics.ACTION_SUBJECT.EDITOR,

package/dist/cjs/ui/ContextPanel/index-compiled.compiled.css

@@ -5,7 +5,6 @@
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._1bsbidpf{width:0}
 ._1bsbnklw{width:20pc}
 ._1reo15vq{overflow-x:hidden}
 ._4t3i1osq{height:100%}

package/dist/cjs/ui/ContextPanel/index-compiled.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ContextPanelWrapperCompiled = exports.ContextPanelContentCompiled = void 0;
 require("./index-compiled.compiled.css");
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -23,46 +24,68 @@ var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
  */
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var ANIM_SPEED_MS = 500;
+var getContextPanelWidthStyle = function getContextPanelWidthStyle(_ref) {
+  var customWidth = _ref.customWidth,
+    visible = _ref.visible;
+  if (!visible) {
+    return {
+      width: 0
+    };
+  }
+  if (customWidth) {
+    return {
+      width: "".concat(customWidth, "px")
+    };
+  }
+  return undefined;
+};
 var panelStyles = {
   panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
-  panelHidden: "_1bsbidpf",
   disablePanelAnimation: "_v564glyw",
   content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
   padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
   customWidthOverflow: "_1reo15vq"
 };
-var ContextPanelWrapperCompiled = exports.ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref) {
-  var children = _ref.children,
-    customWidth = _ref.customWidth,
-    visible = _ref.visible,
-    disableAnimation = _ref.disableAnimation,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var ContextPanelWrapperCompiled = exports.ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref2) {
+  var children = _ref2.children,
+    customWidth = _ref2.customWidth,
+    visible = _ref2.visible,
+    disableAnimation = _ref2.disableAnimation,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var widthStyle = (0, _react.useMemo)(function () {
+    return getContextPanelWidthStyle({
+      customWidth: customWidth,
+      visible: visible
+    });
+  }, [customWidth, visible]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
-    style: customWidth && visible ? {
-      width: "".concat(customWidth, "px")
-    } : undefined
+    style: widthStyle
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, rest, {
-    className: (0, _runtime.ax)([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+    className: (0, _runtime.ax)([panelStyles.panel, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
   }), children);
 };
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var ContextPanelContentCompiled = exports.ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref2) {
-  var children = _ref2.children,
-    customWidth = _ref2.customWidth,
-    visible = _ref2.visible,
-    disableAnimation = _ref2.disableAnimation,
-    hasPadding = _ref2.hasPadding,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+var ContextPanelContentCompiled = exports.ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref3) {
+  var children = _ref3.children,
+    customWidth = _ref3.customWidth,
+    visible = _ref3.visible,
+    disableAnimation = _ref3.disableAnimation,
+    hasPadding = _ref3.hasPadding,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+  var widthStyle = (0, _react.useMemo)(function () {
+    return getContextPanelWidthStyle({
+      customWidth: customWidth,
+      visible: visible
+    });
+  }, [customWidth, visible]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
-    style: customWidth && visible ? {
-      width: "".concat(customWidth, "px")
-    } : undefined
+    style: widthStyle
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, rest, {
-    className: (0, _runtime.ax)([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+    className: (0, _runtime.ax)([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
   }), children);
 };

package/dist/cjs/utils/getEditorDomSize.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getEditorDomSize = getEditorDomSize;
+/**
+ * Returns the total number of DOM elements inside the editor's content DOM,
+ * used as a proxy for document complexity in performance events.
+ *
+ * Uses the native `getElementsByTagName('*')`, which counts descendants
+ * iteratively in the browser engine — intentionally not a recursive JS walk, so
+ * it can't overflow the stack on very large documents.
+ */
+function getEditorDomSize(view) {
+  return view.dom.getElementsByTagName('*').length;
+}

package/dist/cjs/version-wrapper.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var version = exports.version = "221.8.2";
+var version = exports.version = "221.9.0";

package/dist/es2019/composable-editor/core-editor.js

@@ -40,6 +40,7 @@ function Editor(passedProps) {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const editorViewRef = useRef(null);
   const handleAnalyticsEvent = useCallback(data => {
     fireAnalyticsEvent(createAnalyticsEvent)(data);
   }, [createAnalyticsEvent]);
@@ -56,6 +57,7 @@ function Editor(passedProps) {
       onEditorReady,
       featureFlags
     } = propsRef.current;
+    editorViewRef.current = instance.view;
     editorActions._privateRegisterEditor(instance.view, instance.eventDispatcher, instance.transformer, getFeatureFlagsFromRef);
     if (onEditorReady) {
       startMeasure(measurements.ON_EDITOR_READY_CALLBACK);
@@ -70,6 +72,7 @@ function Editor(passedProps) {
     const {
       onDestroy
     } = propsRef.current;
+    editorViewRef.current = null;
     editorActions._privateUnregisterEditor();
     if (onDestroy) {
       onDestroy();
@@ -86,7 +89,9 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   const isFullPageAppearance = Boolean(props.appearance && ['full-page', 'full-width', ...(editorExperiment('platform_synced_block', true) ? ['max'] : [])].includes(props.appearance));
-  return /*#__PURE__*/React.createElement(Fragment, null, isFullPageAppearance ? /*#__PURE__*/React.createElement(EditorINPMetrics, null) : null, /*#__PURE__*/React.createElement(EditorInternal, {
+  return /*#__PURE__*/React.createElement(Fragment, null, isFullPageAppearance ? /*#__PURE__*/React.createElement(EditorINPMetrics, {
+    editorViewRef: editorViewRef
+  }) : null, /*#__PURE__*/React.createElement(EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/es2019/composable-editor/editor-inp-metrics.js

@@ -4,7 +4,11 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import { ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { setupINPTracking } from '@atlaskit/editor-performance-metrics/inp';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
-export const EditorINPMetrics = () => {
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { getEditorDomSize } from '../utils/getEditorDomSize';
+export const EditorINPMetrics = ({
+  editorViewRef
+}) => {
   const analyticsEvents = useAnalyticsEvents();
 
   // onMount lifecycle hook
@@ -16,7 +20,14 @@ export const EditorINPMetrics = () => {
       }) => {
         const interaction = getActiveInteraction();
         const ufoName = interaction === null || interaction === void 0 ? void 0 : interaction.ufoName;
-        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName);
+        let editorDomSize;
+        if (expValEquals('platform_editor_dom_node_count', 'isEnabled', true)) {
+          const editorView = editorViewRef.current;
+          if (editorView) {
+            editorDomSize = getEditorDomSize(editorView);
+          }
+        }
+        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName, editorDomSize);
       });
     });
 
@@ -34,7 +45,7 @@ export const EditorINPMetrics = () => {
   // This component doesn't render anything
   return null;
 };
-const sendAnalytics = debounce((createAnalyticsEvent, value, ufoName) => {
+const sendAnalytics = debounce((createAnalyticsEvent, value, ufoName, editorDomSize) => {
   fireAnalyticsEvent(createAnalyticsEvent)({
     payload: {
       // @ts-expect-error Temporary data
@@ -43,7 +54,8 @@ const sendAnalytics = debounce((createAnalyticsEvent, value, ufoName) => {
       eventType: EVENT_TYPE.TRACK,
       attributes: {
         inp: value,
-        ufoName
+        ufoName,
+        editorDomSize
       }
     }
   });

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

@@ -24,12 +24,14 @@ import { EditorSSRRenderer } from '@atlaskit/editor-ssr-renderer';
 import { createSSREditorState } from '@atlaskit/editor-ssr-renderer/create-ssr-editor-state';
 import { createSSRPMPlugins } from '@atlaskit/editor-ssr-renderer/create-ssr-pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { addUFOCustomData } from '@atlaskit/react-ufo/custom-data';
 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 { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { useProviders } from '../composable-editor/hooks/useProviders';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
+import { getEditorDomSize } from '../utils/getEditorDomSize';
 import { getNodesCountWithExtensionKeys } from '../utils/getNodesCountWithExtensionKeys';
 import { getNodesVisibleInViewport } from '../utils/getNodesVisibleInViewport';
 import { isChromeless } from '../utils/is-chromeless';
@@ -684,6 +686,7 @@ export function ReactEditorView(props) {
             }
           })()
         } : {};
+        const editorDomSize = expValEquals('platform_editor_dom_node_count', 'isEnabled', true) ? getEditorDomSize(viewRef.current) : undefined;
         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;
@@ -708,6 +711,7 @@ export function ReactEditorView(props) {
           nodeSize,
           nodeSizeBucket,
           totalNodes,
+          editorDomSize,
           ttfb,
           severity: proseMirrorRenderedSeverity,
           objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
@@ -718,6 +722,11 @@ export function ReactEditorView(props) {
           extensionKeys,
           ufoInteractionId: getInteractionId().current
         };
+        if (editorDomSize !== undefined) {
+          addUFOCustomData({
+            editorDomSize
+          });
+        }
         dispatchAnalyticsEvent({
           action: ACTION.PROSEMIRROR_RENDERED,
           actionSubject: ACTION_SUBJECT.EDITOR,

package/dist/es2019/ui/ContextPanel/index-compiled.compiled.css

@@ -5,7 +5,6 @@
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._1bsbidpf{width:0}
 ._1bsbnklw{width:20pc}
 ._1reo15vq{overflow-x:hidden}
 ._4t3i1osq{height:100%}

package/dist/es2019/ui/ContextPanel/index-compiled.js

@@ -9,12 +9,27 @@ import { ax, ix } from "@compiled/react/runtime";
  *
  * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
  */
-
+import { useMemo } from 'react';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 const ANIM_SPEED_MS = 500;
+const getContextPanelWidthStyle = ({
+  customWidth,
+  visible
+}) => {
+  if (!visible) {
+    return {
+      width: 0
+    };
+  }
+  if (customWidth) {
+    return {
+      width: `${customWidth}px`
+    };
+  }
+  return undefined;
+};
 const panelStyles = {
   panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
-  panelHidden: "_1bsbidpf",
   disablePanelAnimation: "_v564glyw",
   content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
   padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
@@ -26,15 +41,19 @@ export const ContextPanelWrapperCompiled = ({
   visible,
   disableAnimation,
   ...rest
-}) => /*#__PURE__*/React.createElement("div", _extends({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
-  style: customWidth && visible ? {
-    width: `${customWidth}px`
-  } : undefined
-  // eslint-disable-next-line react/jsx-props-no-spreading
-}, rest, {
-  className: ax([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
-}), children);
+}) => {
+  const widthStyle = useMemo(() => getContextPanelWidthStyle({
+    customWidth,
+    visible
+  }), [customWidth, visible]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
+    style: widthStyle
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest, {
+    className: ax([panelStyles.panel, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
+  }), children);
+};
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const ContextPanelContentCompiled = ({
@@ -44,12 +63,16 @@ export const ContextPanelContentCompiled = ({
   disableAnimation,
   hasPadding,
   ...rest
-}) => /*#__PURE__*/React.createElement("div", _extends({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
-  style: customWidth && visible ? {
-    width: `${customWidth}px`
-  } : undefined
-  // eslint-disable-next-line react/jsx-props-no-spreading
-}, rest, {
-  className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
-}), children);
+}) => {
+  const widthStyle = useMemo(() => getContextPanelWidthStyle({
+    customWidth,
+    visible
+  }), [customWidth, visible]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
+    style: widthStyle
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest, {
+    className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
+  }), children);
+};

package/dist/es2019/utils/getEditorDomSize.js

@@ -0,0 +1,11 @@
+/**
+ * Returns the total number of DOM elements inside the editor's content DOM,
+ * used as a proxy for document complexity in performance events.
+ *
+ * Uses the native `getElementsByTagName('*')`, which counts descendants
+ * iteratively in the browser engine — intentionally not a recursive JS walk, so
+ * it can't overflow the stack on very large documents.
+ */
+export function getEditorDomSize(view) {
+  return view.dom.getElementsByTagName('*').length;
+}

package/dist/es2019/version-wrapper.js

@@ -1,3 +1,3 @@
 export const name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export const version = "221.8.2";
+export const version = "221.9.0";

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

@@ -45,6 +45,7 @@ function Editor(passedProps) {
   var editorActions = editorContext.editorActions || editorActionsPlaceholderInstance;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var editorViewRef = useRef(null);
   var handleAnalyticsEvent = useCallback(function (data) {
     fireAnalyticsEvent(createAnalyticsEvent)(data);
   }, [createAnalyticsEvent]);
@@ -59,6 +60,7 @@ function Editor(passedProps) {
       contextIdentifierProvider = _propsRef$current.contextIdentifierProvider,
       onEditorReady = _propsRef$current.onEditorReady,
       featureFlags = _propsRef$current.featureFlags;
+    editorViewRef.current = instance.view;
     editorActions._privateRegisterEditor(instance.view, instance.eventDispatcher, instance.transformer, getFeatureFlagsFromRef);
     if (onEditorReady) {
       startMeasure(measurements.ON_EDITOR_READY_CALLBACK);
@@ -71,6 +73,7 @@ function Editor(passedProps) {
   }, [editorActions, createAnalyticsEvent, getFeatureFlagsFromRef, propsRef]);
   var onEditorDestroyed = useCallback(function (_instance) {
     var onDestroy = propsRef.current.onDestroy;
+    editorViewRef.current = null;
     editorActions._privateUnregisterEditor();
     if (onDestroy) {
       onDestroy();
@@ -85,7 +88,9 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   var isFullPageAppearance = Boolean(props.appearance && ['full-page', 'full-width'].concat(_toConsumableArray(editorExperiment('platform_synced_block', true) ? ['max'] : [])).includes(props.appearance));
-  return /*#__PURE__*/React.createElement(Fragment, null, isFullPageAppearance ? /*#__PURE__*/React.createElement(EditorINPMetrics, null) : null, /*#__PURE__*/React.createElement(EditorInternal, {
+  return /*#__PURE__*/React.createElement(Fragment, null, isFullPageAppearance ? /*#__PURE__*/React.createElement(EditorINPMetrics, {
+    editorViewRef: editorViewRef
+  }) : null, /*#__PURE__*/React.createElement(EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/esm/composable-editor/editor-inp-metrics.js

@@ -4,18 +4,28 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import { ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { setupINPTracking } from '@atlaskit/editor-performance-metrics/inp';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
-export var EditorINPMetrics = function EditorINPMetrics() {
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { getEditorDomSize } from '../utils/getEditorDomSize';
+export var EditorINPMetrics = function EditorINPMetrics(_ref) {
+  var editorViewRef = _ref.editorViewRef;
   var analyticsEvents = useAnalyticsEvents();
 
   // onMount lifecycle hook
   useEffect(function () {
     var cleanupFn;
     var cleanupIdleCallback = createIdleCallback(function () {
-      cleanupFn = setupINPTracking(function (_ref) {
-        var value = _ref.value;
+      cleanupFn = setupINPTracking(function (_ref2) {
+        var value = _ref2.value;
         var interaction = getActiveInteraction();
         var ufoName = interaction === null || interaction === void 0 ? void 0 : interaction.ufoName;
-        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName);
+        var editorDomSize;
+        if (expValEquals('platform_editor_dom_node_count', 'isEnabled', true)) {
+          var editorView = editorViewRef.current;
+          if (editorView) {
+            editorDomSize = getEditorDomSize(editorView);
+          }
+        }
+        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName, editorDomSize);
       });
     });
 
@@ -33,7 +43,7 @@ export var EditorINPMetrics = function EditorINPMetrics() {
   // This component doesn't render anything
   return null;
 };
-var sendAnalytics = debounce(function (createAnalyticsEvent, value, ufoName) {
+var sendAnalytics = debounce(function (createAnalyticsEvent, value, ufoName, editorDomSize) {
   fireAnalyticsEvent(createAnalyticsEvent)({
     payload: {
       // @ts-expect-error Temporary data
@@ -42,7 +52,8 @@ var sendAnalytics = debounce(function (createAnalyticsEvent, value, ufoName) {
       eventType: EVENT_TYPE.TRACK,
       attributes: {
         inp: value,
-        ufoName: ufoName
+        ufoName: ufoName,
+        editorDomSize: editorDomSize
       }
     }
   });

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

@@ -32,12 +32,14 @@ import { EditorSSRRenderer } from '@atlaskit/editor-ssr-renderer';
 import { createSSREditorState } from '@atlaskit/editor-ssr-renderer/create-ssr-editor-state';
 import { createSSRPMPlugins } from '@atlaskit/editor-ssr-renderer/create-ssr-pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { addUFOCustomData } from '@atlaskit/react-ufo/custom-data';
 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 { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { useProviders } from '../composable-editor/hooks/useProviders';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
+import { getEditorDomSize } from '../utils/getEditorDomSize';
 import { getNodesCountWithExtensionKeys } from '../utils/getNodesCountWithExtensionKeys';
 import { getNodesVisibleInViewport } from '../utils/getNodesVisibleInViewport';
 import { isChromeless } from '../utils/is-chromeless';
@@ -724,6 +726,7 @@ export function ReactEditorView(props) {
           } : {},
           totalNodes = _ref4.totalNodes,
           nodeSizeBucket = _ref4.nodeSizeBucket;
+        var editorDomSize = expValEquals('platform_editor_dom_node_count', 'isEnabled', true) ? getEditorDomSize(viewRef.current) : undefined;
         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;
@@ -748,6 +751,7 @@ export function ReactEditorView(props) {
           nodeSize: nodeSize,
           nodeSizeBucket: nodeSizeBucket,
           totalNodes: totalNodes,
+          editorDomSize: editorDomSize,
           ttfb: ttfb,
           severity: proseMirrorRenderedSeverity,
           objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
@@ -758,6 +762,11 @@ export function ReactEditorView(props) {
           extensionKeys: extensionKeys,
           ufoInteractionId: getInteractionId().current
         };
+        if (editorDomSize !== undefined) {
+          addUFOCustomData({
+            editorDomSize: editorDomSize
+          });
+        }
         dispatchAnalyticsEvent({
           action: ACTION.PROSEMIRROR_RENDERED,
           actionSubject: ACTION_SUBJECT.EDITOR,

package/dist/esm/ui/ContextPanel/index-compiled.compiled.css

@@ -5,7 +5,6 @@
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._1bsbidpf{width:0}
 ._1bsbnklw{width:20pc}
 ._1reo15vq{overflow-x:hidden}
 ._4t3i1osq{height:100%}

package/dist/esm/ui/ContextPanel/index-compiled.js

@@ -12,49 +12,71 @@ import { ax, ix } from "@compiled/react/runtime";
  *
  * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
  */
-
+import { useMemo } from 'react';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 var ANIM_SPEED_MS = 500;
+var getContextPanelWidthStyle = function getContextPanelWidthStyle(_ref) {
+  var customWidth = _ref.customWidth,
+    visible = _ref.visible;
+  if (!visible) {
+    return {
+      width: 0
+    };
+  }
+  if (customWidth) {
+    return {
+      width: "".concat(customWidth, "px")
+    };
+  }
+  return undefined;
+};
 var panelStyles = {
   panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
-  panelHidden: "_1bsbidpf",
   disablePanelAnimation: "_v564glyw",
   content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
   padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
   customWidthOverflow: "_1reo15vq"
 };
-export var ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref) {
-  var children = _ref.children,
-    customWidth = _ref.customWidth,
-    visible = _ref.visible,
-    disableAnimation = _ref.disableAnimation,
-    rest = _objectWithoutProperties(_ref, _excluded);
+export var ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref2) {
+  var children = _ref2.children,
+    customWidth = _ref2.customWidth,
+    visible = _ref2.visible,
+    disableAnimation = _ref2.disableAnimation,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var widthStyle = useMemo(function () {
+    return getContextPanelWidthStyle({
+      customWidth: customWidth,
+      visible: visible
+    });
+  }, [customWidth, visible]);
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
-    style: customWidth && visible ? {
-      width: "".concat(customWidth, "px")
-    } : undefined
+    style: widthStyle
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, rest, {
-    className: ax([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+    className: ax([panelStyles.panel, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
   }), children);
 };
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref2) {
-  var children = _ref2.children,
-    customWidth = _ref2.customWidth,
-    visible = _ref2.visible,
-    disableAnimation = _ref2.disableAnimation,
-    hasPadding = _ref2.hasPadding,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
+export var ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref3) {
+  var children = _ref3.children,
+    customWidth = _ref3.customWidth,
+    visible = _ref3.visible,
+    disableAnimation = _ref3.disableAnimation,
+    hasPadding = _ref3.hasPadding,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var widthStyle = useMemo(function () {
+    return getContextPanelWidthStyle({
+      customWidth: customWidth,
+      visible: visible
+    });
+  }, [customWidth, visible]);
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
-    style: customWidth && visible ? {
-      width: "".concat(customWidth, "px")
-    } : undefined
+    style: widthStyle
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, rest, {
-    className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+    className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
   }), children);
 };

package/dist/esm/utils/getEditorDomSize.js

@@ -0,0 +1,11 @@
+/**
+ * Returns the total number of DOM elements inside the editor's content DOM,
+ * used as a proxy for document complexity in performance events.
+ *
+ * Uses the native `getElementsByTagName('*')`, which counts descendants
+ * iteratively in the browser engine — intentionally not a recursive JS walk, so
+ * it can't overflow the stack on very large documents.
+ */
+export function getEditorDomSize(view) {
+  return view.dom.getElementsByTagName('*').length;
+}

package/dist/esm/version-wrapper.js

@@ -1,3 +1,3 @@
 export var name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var version = "221.8.2";
+export var version = "221.9.0";

package/dist/types/composable-editor/editor-inp-metrics.d.ts

@@ -1 +1,7 @@
-export declare const EditorINPMetrics: () => null;
+import { type RefObject } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+type EditorINPMetricsProps = {
+    editorViewRef: RefObject<EditorView | null>;
+};
+export declare const EditorINPMetrics: ({ editorViewRef }: EditorINPMetricsProps) => null;
+export {};

package/dist/types/ui/Appearance/FullPage/FullPageToolbarNext.d.ts

@@ -1,7 +1,6 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
- * @jsxFrag
  */
 import React from 'react';
 import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';

package/dist/types/ui/ContextPanel/index-compiled.d.ts

@@ -1,14 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- * Compiled migration: platform_editor_core_non_ecc_static_css
- */
-/**
- * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
- * Used via `componentWithCondition` in `index.tsx`.
- *
- * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
- */
 import type { HTMLAttributes } from 'react';
 export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
     customWidth?: number;

package/dist/types/utils/getEditorDomSize.d.ts

@@ -0,0 +1,10 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Returns the total number of DOM elements inside the editor's content DOM,
+ * used as a proxy for document complexity in performance events.
+ *
+ * Uses the native `getElementsByTagName('*')`, which counts descendants
+ * iteratively in the browser engine — intentionally not a recursive JS walk, so
+ * it can't overflow the stack on very large documents.
+ */
+export declare function getEditorDomSize(view: EditorView): number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "221.8.3",
+	"version": "221.9.1",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 		"@atlaskit/react-ufo": "^7.3.0",
 		"@atlaskit/task-decision": "^21.4.0",
 		"@atlaskit/tmp-editor-statsig": "^124.2.0",
-		"@atlaskit/tokens": "^15.6.0",
+		"@atlaskit/tokens": "^15.7.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/width-detector": "^6.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -85,7 +85,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.26.0",
+		"@atlaskit/editor-common": "^116.27.0",
 		"@atlaskit/link-provider": "^5.2.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",