@atlaskit/editor-core 203.16.5 → 203.17.2

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

@@ -0,0 +1,92 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useCallback, useState, useRef, Fragment, memo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
+import { ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { PerformanceMetrics } from '@atlaskit/editor-performance-metrics/react';
+import UFOLoadHold from '@atlaskit/react-ufo/load-hold';
+export const EditorUFOBridge = /*#__PURE__*/memo(() => {
+  const [hold, setHold] = useState(true);
+  const onTTAI = useCallback(() => {
+    setHold(false);
+  }, []);
+  return jsx(Fragment, null, jsx(UFOLoadHold, {
+    name: "editor-core",
+    hold: hold
+  }), jsx(PerformanceMetrics, {
+    onTTAI: onTTAI
+  }));
+});
+export const EditorPerformanceMetrics = /*#__PURE__*/memo(() => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const [ttai, setTTAI] = useState(null);
+  const [ttvc, setTTVC] = useState(null);
+  const [latency, setUserLatency] = useState(null);
+  const ttvcSentRef = useRef(false);
+  const latencySentRef = useRef(false);
+  const handleAnalyticsEvent = useCallback(data => {
+    fireAnalyticsEvent(createAnalyticsEvent)(data);
+  }, [createAnalyticsEvent]);
+  const onTTAI = useCallback(({
+    idleAt
+  }) => {
+    setTTAI(idleAt);
+  }, []);
+  const onTTVC = useCallback(({
+    ttvc
+  }) => {
+    setTTVC(ttvc);
+  }, []);
+  const onUserLatency = useCallback(({
+    latency
+  }) => {
+    setUserLatency(latency);
+  }, []);
+  useEffect(() => {
+    if (!ttai || !ttvc || ttvcSentRef.current) {
+      return;
+    }
+    ttvcSentRef.current = true;
+    handleAnalyticsEvent({
+      payload: {
+        // @ts-expect-error Temporary data - let's not extend the public analytics enum
+        action: 'ttvc',
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          ttvc,
+          ttai
+        }
+      }
+    });
+  }, [handleAnalyticsEvent, ttai, ttvc]);
+  useEffect(() => {
+    if (!latency || latencySentRef.current) {
+      return;
+    }
+    latencySentRef.current = true;
+    handleAnalyticsEvent({
+      payload: {
+        // @ts-expect-error Temporary data - let's not extend the public analytics enum
+        action: 'latency',
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          latency
+        }
+      }
+    });
+  }, [handleAnalyticsEvent, latency]);
+  return jsx(PerformanceMetrics, {
+    onTTAI: onTTAI,
+    onTTVC: onTTVC,
+    onUserLatency: onUserLatency
+  });
+});

package/dist/es2019/index.js

@@ -21,6 +21,7 @@ export { default as WithEditorActions } from './ui/WithEditorActions';
  */
 export { default as WithHelpTrigger } from './ui/WithHelpTrigger';
 export { default as CollapsedEditor } from './ui/CollapsedEditor';
+export { ToolbarPortalContextProvider, useToolbarPortal } from './ui/Toolbar/ToolbarPortal';
 export { default as ToolbarHelp } from './ui/ToolbarHelp';
 export {
 // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883

package/dist/es2019/ui/Addon/ClickAreaBlock/contentComponentWrapper.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+export const ignoreAttribute = 'data-editor-content-component';
+
+/**
+ * Wraps content components in a data attribute to ignore
+ */
+export const contentComponentClickWrapper = reactComponents => {
+  if (!fg('platform_editor_content_component_ignore_click')) {
+    return reactComponents;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-editor-content-component": 'true'
+  }, reactComponents);
+};

package/dist/es2019/ui/Addon/click-area-helper.js

@@ -2,6 +2,8 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { addParagraphAtEnd } from '@atlaskit/editor-common/commands';
 import { setSelectionTopLevelBlocks } from '@atlaskit/editor-common/selection';
 import { closestElement } from '@atlaskit/editor-common/utils';
+import { ignoreAttribute } from './ClickAreaBlock/contentComponentWrapper';
+
 // we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
 const insideContentArea = ref => {
   while (ref) {
@@ -72,6 +74,7 @@ const clickAreaClickHandler = (view, event) => {
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
+  const isContentComponent = !!closestElement(target, `[${ignoreAttribute}]`) || (target === null || target === void 0 ? void 0 : target.getAttribute(ignoreAttribute)) === 'true';
 
   // This is a super workaround to find when events are coming from Confluence InlineComment modal
   // We don't own those components, so we can't change them
@@ -87,14 +90,14 @@ const clickAreaClickHandler = (view, event) => {
   const edgeCaseScenario3 = isTargetContentArea && !isTargetInsideContentArea && !isEditorFocused;
   const edgeCaseScenario4 = isEventComingFromContentArea && !isTargetContentArea && !isTargetInsideContentArea && !isEditorFocused;
   const edgeCases = edgeCaseScenario1 || edgeCaseScenario2 || edgeCaseScenario3 || edgeCaseScenario4;
-  const isClickOutsideEditor = edgeCases && !isDatasourcePopupClicked && !isEventComingFromInlineCommentPopup && !isButtonClicked && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && checkForModal(target);
+  const isClickOutsideEditor = edgeCases && !isDatasourcePopupClicked && !isEventComingFromInlineCommentPopup && !isButtonClicked && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && !isContentComponent && checkForModal(target);
 
   // click was within editor container and focus should be brought to input
   if (isClickOutsideEditor && view) {
     outsideProsemirrorEditorClickHandler(view, event);
   }
 };
-const outsideProsemirrorEditorClickHandler = (view, event) => {
+export const outsideProsemirrorEditorClickHandler = (view, event) => {
   var _view$hasFocus2;
   const {
     dispatch,

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

@@ -20,6 +20,7 @@ import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ClickAreaBlock from '../../Addon/ClickAreaBlock';
+import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
 import { createEditorContentStyle } from '../../ContentStyles';
 import PluginSlot from '../../PluginSlot';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
@@ -224,7 +225,7 @@ export const CommentEditorWithIntl = props => {
       }),
       featureFlags: featureFlags,
       viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-    }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
+    }, customContentComponents && 'before' in customContentComponents ? contentComponentClickWrapper(customContentComponents.before) : contentComponentClickWrapper(customContentComponents), jsx(PluginSlot, {
       editorView: editorView,
       editorActions: editorActions,
       eventDispatcher: eventDispatcher,
@@ -239,7 +240,7 @@ export const CommentEditorWithIntl = props => {
       disabled: !!disabled,
       wrapperElement: wrapperElementRef.current,
       pluginHooks: pluginHooks
-    }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? customContentComponents.after : null);
+    }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? contentComponentClickWrapper(customContentComponents.after) : null);
   }))), showSecondaryToolbar && jsx("div", {
     css: secondaryToolbarStyles,
     "data-testid": "ak-editor-secondary-toolbar"

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

@@ -13,6 +13,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ClickAreaBlock from '../../Addon/ClickAreaBlock';
+import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
 import { ContextPanel } from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
 import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
@@ -82,7 +83,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     ,
     className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
     ref: contentAreaRef
-  }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
+  }, !!props.customContentComponents && 'before' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.before) : contentComponentClickWrapper(props.customContentComponents), jsx(PluginSlot, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -98,7 +99,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     containerElement: scrollContainerRef.current,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null))))), jsx("div", {
+  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null))))), jsx("div", {
     css: sidebarArea
   }, props.contextPanel || jsx(ContextPanel, {
     editorAPI: props.editorAPI,

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

@@ -11,11 +11,13 @@ import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ToolbarPortalMountPoint, useToolbarPortal } from '../../Toolbar/ToolbarPortal';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import { BeforePrimaryToolbarWrapper } from './BeforeWrapper';
 import { customToolbarWrapperStyle, mainToolbarFirstChildStyle, mainToolbarIconBeforeStyle, mainToolbarSecondChildStyle, mainToolbarStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, nonCustomToolbarWrapperStyle } from './MainToolbar';
 export const EditorToolbar = /*#__PURE__*/React.memo(props => {
-  var _props$customPrimaryT;
+  var _props$customPrimaryT, _useToolbarPortal;
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
   const {
     editorAPI
@@ -86,6 +88,14 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     event.preventDefault();
     event.stopPropagation();
   };
+
+  // When a toolbar portal context is provided, render the  toolbar inside a portal.
+  // Otherwise fall back to a fragment just to avoid forking rendering logic.
+  const {
+    Portal: ToolbarPortal
+  } = (_useToolbarPortal = useToolbarPortal()) !== null && _useToolbarPortal !== void 0 ? _useToolbarPortal : {
+    Portal: React.Fragment
+  };
   return jsx(ContextPanelConsumer, null, ({
     width: contextPanelWidth
   }) => jsx(ToolbarArrowKeyNavigationProvider, {
@@ -94,7 +104,22 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     isShortcutToFocusToolbar: isShortcutToFocusToolbar,
     handleEscape: handleEscape,
     intl: props.intl
+  }, fg('platform_editor_lcm_toolbar_portals') ? jsx(ToolbarPortal, 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: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, twoLineEditorToolbar),
+    "data-testid": "ak-editor-main-toolbar"
   }, 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: mainToolbarFirstChildStyle(twoLineEditorToolbar),
+    role: "toolbar",
+    "aria-label": props.intl.formatMessage(messages.toolbarLabel)
+  }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), 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: mainToolbarSecondChildStyle(twoLineEditorToolbar),
+    "data-testid": "avatar-group-outside-plugin",
+    role: "region",
+    "aria-label": props.intl.formatMessage(messages.pageActionsLabel)
+  }, shouldSplitToolbar ? nonCustomToolbar : customToolbar), jsx(ToolbarPortalMountPoint, 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: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, twoLineEditorToolbar),
     "data-testid": "ak-editor-main-toolbar"
@@ -106,7 +131,7 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), 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: mainToolbarSecondChildStyle(twoLineEditorToolbar),
-    "data-testid": 'avatar-group-outside-plugin',
+    "data-testid": "avatar-group-outside-plugin",
     role: "region",
     "aria-label": props.intl.formatMessage(messages.pageActionsLabel)
   }, shouldSplitToolbar ? nonCustomToolbar : customToolbar))));

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

@@ -80,7 +80,17 @@ export const contentAreaHeightNoToolbar = css({
 export const sidebarArea = css({
   height: '100%',
   boxSizing: 'border-box',
-  alignSelf: 'flex-end'
+  alignSelf: 'flex-end',
+  // Make the sidebar sticky within the legacy content macro
+  // to prevent it from aligning to the bottom with large content.
+  // This style is only applied when opening inside the legacy content macro.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
+  '.extension-editable-area &': {
+    height: 'auto',
+    position: 'sticky',
+    top: 0,
+    alignSelf: 'flex-start'
+  }
 });
 
 // initially hide until we have a containerWidth and can properly size them,

package/dist/es2019/ui/ContentStyles/extension.js

@@ -180,6 +180,11 @@ export const extensionStyles = css`
 
 	.extensionView-content-wrap .extension-container {
 		overflow: hidden;
+
+		/* Don't hide overflow for editors inside extensions */
+		&:has(.extension-editable-area) {
+			overflow: visible;
+		}
 	}
 
 	.bodiedExtensionView-content-wrap .extensionView-content-wrap .extension-container {

package/dist/es2019/ui/Toolbar/ToolbarPortal.compiled.css

@@ -0,0 +1,3 @@
+._1r04ze3t{inset:var(--ds-space-0,0)}
+._fiawglyw:empty{display:none}
+._kqswstnw{position:absolute}

package/dist/es2019/ui/Toolbar/ToolbarPortal.js

@@ -0,0 +1,40 @@
+/* ToolbarPortal.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolbarPortal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const ToolbarPortalContext = /*#__PURE__*/React.createContext(undefined);
+export const ToolbarPortalContextProvider = ({
+  children,
+  portal,
+  isActive
+}) => {
+  const value = React.useMemo(() => ({
+    Portal: portal,
+    isActive
+  }), [portal, isActive]);
+  return /*#__PURE__*/React.createElement(ToolbarPortalContext.Provider, {
+    value: value
+  }, children);
+};
+
+// NOTE: This doesn't throw on undefined context on purpose, as it is likely that
+// the outer toolbar _won't_ have a context provider as it is unlikely to portal
+// anywhere
+export const useToolbarPortal = () => {
+  return React.useContext(ToolbarPortalContext);
+};
+const toolbarPortalStyles = {
+  portal: "_1r04ze3t _kqswstnw _fiawglyw"
+};
+export const ToolbarPortalMountPoint = () => {
+  const portal = useToolbarPortal();
+
+  // Don't render a mountpoint when we're already inside a portal
+  if (portal) {
+    return null;
+  }
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([toolbarPortalStyles.portal, "ak-editor-toolbar-portal"])
+  });
+};

package/dist/es2019/version-wrapper.js

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

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

@@ -6,7 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -17,11 +17,13 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import { ACTION, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { getAnalyticsAppearance } from '@atlaskit/editor-common/utils/analytics';
+import { fg } from '@atlaskit/platform-feature-flags';
 import EditorActions from '../actions';
 import { useEditorContext } from '../ui/EditorContext';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import measurements from '../utils/performance/measure-enum';
 import { name, version } from '../version-wrapper';
+import { EditorUFOBridge, EditorPerformanceMetrics } from './core-performance-metrics';
 import { EditorInternal } from './editor-internal';
 import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';
 // Ignored via go/ees005
@@ -87,7 +89,8 @@ function Editor(passedProps) {
       onSaveFromProps(view);
     }
   }, [onSaveFromProps]);
-  return jsx(EditorInternal, {
+  var isFullPageApperance = Boolean(props.appearance && ['full-page', 'full-width'].includes(props.appearance));
+  return jsx(Fragment, null, isFullPageApperance && fg('platform_editor_fe--ufo-bridge') ? jsx(EditorUFOBridge, null) : null, isFullPageApperance && fg('platform_editor_fe--performance_metrics') ? jsx(EditorPerformanceMetrics, null) : null, jsx(EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,
@@ -98,7 +101,7 @@ function Editor(passedProps) {
     onEditorDestroyed: onEditorDestroyed,
     providerFactory: providerFactory,
     AppearanceComponent: props.AppearanceComponent
-  });
+  }));
 }
 var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags) {
   var ffRef = useRef(featureFlags);

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

@@ -0,0 +1,101 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useCallback, useState, useRef, Fragment, memo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
+import { ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { PerformanceMetrics } from '@atlaskit/editor-performance-metrics/react';
+import UFOLoadHold from '@atlaskit/react-ufo/load-hold';
+export var EditorUFOBridge = /*#__PURE__*/memo(function () {
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    hold = _useState2[0],
+    setHold = _useState2[1];
+  var onTTAI = useCallback(function () {
+    setHold(false);
+  }, []);
+  return jsx(Fragment, null, jsx(UFOLoadHold, {
+    name: "editor-core",
+    hold: hold
+  }), jsx(PerformanceMetrics, {
+    onTTAI: onTTAI
+  }));
+});
+export var EditorPerformanceMetrics = /*#__PURE__*/memo(function () {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ttai = _useState4[0],
+    setTTAI = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    ttvc = _useState6[0],
+    setTTVC = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    latency = _useState8[0],
+    setUserLatency = _useState8[1];
+  var ttvcSentRef = useRef(false);
+  var latencySentRef = useRef(false);
+  var handleAnalyticsEvent = useCallback(function (data) {
+    fireAnalyticsEvent(createAnalyticsEvent)(data);
+  }, [createAnalyticsEvent]);
+  var onTTAI = useCallback(function (_ref) {
+    var idleAt = _ref.idleAt;
+    setTTAI(idleAt);
+  }, []);
+  var onTTVC = useCallback(function (_ref2) {
+    var ttvc = _ref2.ttvc;
+    setTTVC(ttvc);
+  }, []);
+  var onUserLatency = useCallback(function (_ref3) {
+    var latency = _ref3.latency;
+    setUserLatency(latency);
+  }, []);
+  useEffect(function () {
+    if (!ttai || !ttvc || ttvcSentRef.current) {
+      return;
+    }
+    ttvcSentRef.current = true;
+    handleAnalyticsEvent({
+      payload: {
+        // @ts-expect-error Temporary data - let's not extend the public analytics enum
+        action: 'ttvc',
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          ttvc: ttvc,
+          ttai: ttai
+        }
+      }
+    });
+  }, [handleAnalyticsEvent, ttai, ttvc]);
+  useEffect(function () {
+    if (!latency || latencySentRef.current) {
+      return;
+    }
+    latencySentRef.current = true;
+    handleAnalyticsEvent({
+      payload: {
+        // @ts-expect-error Temporary data - let's not extend the public analytics enum
+        action: 'latency',
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          latency: latency
+        }
+      }
+    });
+  }, [handleAnalyticsEvent, latency]);
+  return jsx(PerformanceMetrics, {
+    onTTAI: onTTAI,
+    onTTVC: onTTVC,
+    onUserLatency: onUserLatency
+  });
+});

package/dist/esm/index.js

@@ -21,6 +21,7 @@ export { default as WithEditorActions } from './ui/WithEditorActions';
  */
 export { default as WithHelpTrigger } from './ui/WithHelpTrigger';
 export { default as CollapsedEditor } from './ui/CollapsedEditor';
+export { ToolbarPortalContextProvider, useToolbarPortal } from './ui/Toolbar/ToolbarPortal';
 export { default as ToolbarHelp } from './ui/ToolbarHelp';
 export {
 // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883

package/dist/esm/ui/Addon/ClickAreaBlock/contentComponentWrapper.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+export var ignoreAttribute = 'data-editor-content-component';
+
+/**
+ * Wraps content components in a data attribute to ignore
+ */
+export var contentComponentClickWrapper = function contentComponentClickWrapper(reactComponents) {
+  if (!fg('platform_editor_content_component_ignore_click')) {
+    return reactComponents;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-editor-content-component": 'true'
+  }, reactComponents);
+};

package/dist/esm/ui/Addon/click-area-helper.js

@@ -2,6 +2,8 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { addParagraphAtEnd } from '@atlaskit/editor-common/commands';
 import { setSelectionTopLevelBlocks } from '@atlaskit/editor-common/selection';
 import { closestElement } from '@atlaskit/editor-common/utils';
+import { ignoreAttribute } from './ClickAreaBlock/contentComponentWrapper';
+
 // we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
 var insideContentArea = function insideContentArea(ref) {
   while (ref) {
@@ -72,6 +74,7 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
+  var isContentComponent = !!closestElement(target, "[".concat(ignoreAttribute, "]")) || (target === null || target === void 0 ? void 0 : target.getAttribute(ignoreAttribute)) === 'true';
 
   // This is a super workaround to find when events are coming from Confluence InlineComment modal
   // We don't own those components, so we can't change them
@@ -87,14 +90,14 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
   var edgeCaseScenario3 = isTargetContentArea && !isTargetInsideContentArea && !isEditorFocused;
   var edgeCaseScenario4 = isEventComingFromContentArea && !isTargetContentArea && !isTargetInsideContentArea && !isEditorFocused;
   var edgeCases = edgeCaseScenario1 || edgeCaseScenario2 || edgeCaseScenario3 || edgeCaseScenario4;
-  var isClickOutsideEditor = edgeCases && !isDatasourcePopupClicked && !isEventComingFromInlineCommentPopup && !isButtonClicked && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && checkForModal(target);
+  var isClickOutsideEditor = edgeCases && !isDatasourcePopupClicked && !isEventComingFromInlineCommentPopup && !isButtonClicked && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && !isContentComponent && checkForModal(target);
 
   // click was within editor container and focus should be brought to input
   if (isClickOutsideEditor && view) {
     outsideProsemirrorEditorClickHandler(view, event);
   }
 };
-var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClickHandler(view, event) {
+export var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClickHandler(view, event) {
   var _view$hasFocus2;
   var dispatch = view.dispatch,
     dom = view.dom,

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

@@ -21,6 +21,7 @@ import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ClickAreaBlock from '../../Addon/ClickAreaBlock';
+import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
 import { createEditorContentStyle } from '../../ContentStyles';
 import PluginSlot from '../../PluginSlot';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
@@ -227,7 +228,7 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
       }),
       featureFlags: featureFlags,
       viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-    }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
+    }, customContentComponents && 'before' in customContentComponents ? contentComponentClickWrapper(customContentComponents.before) : contentComponentClickWrapper(customContentComponents), jsx(PluginSlot, {
       editorView: editorView,
       editorActions: editorActions,
       eventDispatcher: eventDispatcher,
@@ -242,7 +243,7 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
       disabled: !!disabled,
       wrapperElement: wrapperElementRef.current,
       pluginHooks: pluginHooks
-    }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? customContentComponents.after : null);
+    }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? contentComponentClickWrapper(customContentComponents.after) : null);
   }))), showSecondaryToolbar && jsx("div", {
     css: secondaryToolbarStyles,
     "data-testid": "ak-editor-secondary-toolbar"

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

@@ -13,6 +13,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ClickAreaBlock from '../../Addon/ClickAreaBlock';
+import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
 import { ContextPanel } from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
 import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
@@ -84,7 +85,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ,
     className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
     ref: contentAreaRef
-  }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
+  }, !!props.customContentComponents && 'before' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.before) : contentComponentClickWrapper(props.customContentComponents), jsx(PluginSlot, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -100,7 +101,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     containerElement: scrollContainerRef.current,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null))))), jsx("div", {
+  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null))))), jsx("div", {
     css: sidebarArea
   }, props.contextPanel || jsx(ContextPanel, {
     editorAPI: props.editorAPI,