@atlaskit/editor-core 203.16.5 → 203.17.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-core
 
+## 203.17.2
+
+### Patch Changes
+
+- [#115172](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115172)
+  [`5dc3799cf466f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5dc3799cf466f) -
+  [ED-26517] Fix LCM right rail alignment
+- Updated dependencies
+
+## 203.17.1
+
+### Patch Changes
+
+- [#112383](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112383)
+  [`51edd811330b1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/51edd811330b1) -
+  [AFO-3351] Introduce Editor PerformanceMetrics into editor-core
+- Updated dependencies
+
+## 203.17.0
+
+### Minor Changes
+
+- [#108587](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108587)
+  [`441cefc11a2b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/441cefc11a2b9) -
+  [ux] [ED-26339] Add toolbar portal and mountpoint for rendering nested toolbars
+
 ## 203.16.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -36,6 +36,9 @@
         {
             "path": "../../editor-json-transformer/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-performance-metrics/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-quick-insert/afm-cc/tsconfig.json"
         },
@@ -60,6 +63,9 @@
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../react-ufo/atlaskit/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -36,6 +36,9 @@
 		{
 			"path": "../../editor-json-transformer/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-performance-metrics/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-quick-insert/afm-jira/tsconfig.json"
 		},
@@ -60,6 +63,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/task-decision/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -36,6 +36,9 @@
 		{
 			"path": "../../editor-json-transformer/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-performance-metrics/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-quick-insert/afm-post-office/tsconfig.json"
 		},
@@ -60,6 +63,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/task-decision/afm-post-office/tsconfig.json"
 		},

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

@@ -17,11 +17,13 @@ var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents"
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = _interopRequireDefault(require("../actions"));
 var _EditorContext = require("../ui/EditorContext");
 var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
 var _measureEnum = _interopRequireDefault(require("../utils/performance/measure-enum"));
 var _versionWrapper = require("../version-wrapper");
+var _corePerformanceMetrics = require("./core-performance-metrics");
 var _editorInternal = require("./editor-internal");
 var _useMeasureEditorMountTime = _interopRequireDefault(require("./hooks/useMeasureEditorMountTime"));
 var _useMemoEditorProps = _interopRequireDefault(require("./hooks/useMemoEditorProps"));
@@ -91,7 +93,8 @@ function Editor(passedProps) {
       onSaveFromProps(view);
     }
   }, [onSaveFromProps]);
-  return (0, _react2.jsx)(_editorInternal.EditorInternal, {
+  var isFullPageApperance = Boolean(props.appearance && ['full-page', 'full-width'].includes(props.appearance));
+  return (0, _react2.jsx)(_react.Fragment, null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--ufo-bridge') ? (0, _react2.jsx)(_corePerformanceMetrics.EditorUFOBridge, null) : null, isFullPageApperance && (0, _platformFeatureFlags.fg)('platform_editor_fe--performance_metrics') ? (0, _react2.jsx)(_corePerformanceMetrics.EditorPerformanceMetrics, null) : null, (0, _react2.jsx)(_editorInternal.EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,
@@ -102,7 +105,7 @@ function Editor(passedProps) {
     onEditorDestroyed: onEditorDestroyed,
     providerFactory: providerFactory,
     AppearanceComponent: props.AppearanceComponent
-  });
+  }));
 }
 var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags) {
   var ffRef = (0, _react.useRef)(featureFlags);

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

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorUFOBridge = exports.EditorPerformanceMetrics = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _react3 = require("@atlaskit/editor-performance-metrics/react");
+var _loadHold = _interopRequireDefault(require("@atlaskit/react-ufo/load-hold"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var EditorUFOBridge = exports.EditorUFOBridge = /*#__PURE__*/(0, _react.memo)(function () {
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hold = _useState2[0],
+    setHold = _useState2[1];
+  var onTTAI = (0, _react.useCallback)(function () {
+    setHold(false);
+  }, []);
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_loadHold.default, {
+    name: "editor-core",
+    hold: hold
+  }), (0, _react2.jsx)(_react3.PerformanceMetrics, {
+    onTTAI: onTTAI
+  }));
+});
+var EditorPerformanceMetrics = exports.EditorPerformanceMetrics = /*#__PURE__*/(0, _react.memo)(function () {
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    ttai = _useState4[0],
+    setTTAI = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    ttvc = _useState6[0],
+    setTTVC = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    latency = _useState8[0],
+    setUserLatency = _useState8[1];
+  var ttvcSentRef = (0, _react.useRef)(false);
+  var latencySentRef = (0, _react.useRef)(false);
+  var handleAnalyticsEvent = (0, _react.useCallback)(function (data) {
+    (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)(data);
+  }, [createAnalyticsEvent]);
+  var onTTAI = (0, _react.useCallback)(function (_ref) {
+    var idleAt = _ref.idleAt;
+    setTTAI(idleAt);
+  }, []);
+  var onTTVC = (0, _react.useCallback)(function (_ref2) {
+    var ttvc = _ref2.ttvc;
+    setTTVC(ttvc);
+  }, []);
+  var onUserLatency = (0, _react.useCallback)(function (_ref3) {
+    var latency = _ref3.latency;
+    setUserLatency(latency);
+  }, []);
+  (0, _react.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: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          ttvc: ttvc,
+          ttai: ttai
+        }
+      }
+    });
+  }, [handleAnalyticsEvent, ttai, ttvc]);
+  (0, _react.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: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          latency: latency
+        }
+      }
+    });
+  }, [handleAnalyticsEvent, latency]);
+  return (0, _react2.jsx)(_react3.PerformanceMetrics, {
+    onTTAI: onTTAI,
+    onTTVC: onTTVC,
+    onUserLatency: onUserLatency
+  });
+});

package/dist/cjs/index.js

@@ -40,6 +40,12 @@ Object.defineProperty(exports, "ToolbarHelp", {
     return _ToolbarHelp.default;
   }
 });
+Object.defineProperty(exports, "ToolbarPortalContextProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarPortal.ToolbarPortalContextProvider;
+  }
+});
 Object.defineProperty(exports, "WithEditorActions", {
   enumerable: true,
   get: function get() {
@@ -82,6 +88,12 @@ Object.defineProperty(exports, "name", {
     return _versionWrapper.name;
   }
 });
+Object.defineProperty(exports, "useToolbarPortal", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarPortal.useToolbarPortal;
+  }
+});
 Object.defineProperty(exports, "version", {
   enumerable: true,
   get: function get() {
@@ -94,6 +106,7 @@ var _EditorContext = _interopRequireDefault(require("./ui/EditorContext"));
 var _WithEditorActions = _interopRequireDefault(require("./ui/WithEditorActions"));
 var _WithHelpTrigger = _interopRequireDefault(require("./ui/WithHelpTrigger"));
 var _CollapsedEditor = _interopRequireDefault(require("./ui/CollapsedEditor"));
+var _ToolbarPortal = require("./ui/Toolbar/ToolbarPortal");
 var _ToolbarHelp = _interopRequireDefault(require("./ui/ToolbarHelp"));
 var _ContextPanel = require("./ui/ContextPanel");
 var _getNodesCount = require("./utils/getNodesCount");

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ignoreAttribute = exports.contentComponentClickWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var ignoreAttribute = exports.ignoreAttribute = 'data-editor-content-component';
+
+/**
+ * Wraps content components in a data attribute to ignore
+ */
+var contentComponentClickWrapper = exports.contentComponentClickWrapper = function contentComponentClickWrapper(reactComponents) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_content_component_ignore_click')) {
+    return reactComponents;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-editor-content-component": 'true'
+  }, reactComponents);
+};

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

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.clickAreaClickHandler = exports.checkForModal = void 0;
+exports.outsideProsemirrorEditorClickHandler = exports.clickAreaClickHandler = exports.checkForModal = void 0;
 var _collab = require("@atlaskit/editor-common/collab");
 var _commands = require("@atlaskit/editor-common/commands");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
+var _contentComponentWrapper = require("./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) {
@@ -78,6 +79,7 @@ var clickAreaClickHandler = exports.clickAreaClickHandler = function clickAreaCl
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   (0, _utils.closestElement)(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
+  var isContentComponent = !!(0, _utils.closestElement)(target, "[".concat(_contentComponentWrapper.ignoreAttribute, "]")) || (target === null || target === void 0 ? void 0 : target.getAttribute(_contentComponentWrapper.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
@@ -93,14 +95,14 @@ var clickAreaClickHandler = exports.clickAreaClickHandler = function clickAreaCl
   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) {
+var outsideProsemirrorEditorClickHandler = exports.outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClickHandler(view, event) {
   var _view$hasFocus2;
   var dispatch = view.dispatch,
     dom = view.dom,

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

@@ -21,6 +21,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
+var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
 var _ContentStyles = require("../../ContentStyles");
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
@@ -239,7 +240,7 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
       }),
       featureFlags: featureFlags,
       viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-    }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
+    }, customContentComponents && 'before' in customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(customContentComponents.before) : (0, _contentComponentWrapper.contentComponentClickWrapper)(customContentComponents), (0, _react2.jsx)(_PluginSlot.default, {
       editorView: editorView,
       editorActions: editorActions,
       eventDispatcher: eventDispatcher,
@@ -254,7 +255,7 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
       disabled: !!disabled,
       wrapperElement: wrapperElementRef.current,
       pluginHooks: pluginHooks
-    }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? customContentComponents.after : null);
+    }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(customContentComponents.after) : null);
   }))), showSecondaryToolbar && (0, _react2.jsx)("div", {
     css: secondaryToolbarStyles,
     "data-testid": "ak-editor-secondary-toolbar"

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

@@ -12,6 +12,7 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
+var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
 var _ContextPanel = require("../../ContextPanel");
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
 var _StyledComponents = require("./StyledComponents");
@@ -95,7 +96,7 @@ var Content = /*#__PURE__*/_react.default.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, (0, _react2.jsx)(_PluginSlot.default, {
+  }, !!props.customContentComponents && 'before' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.before) : (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents), (0, _react2.jsx)(_PluginSlot.default, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -111,7 +112,7 @@ var Content = /*#__PURE__*/_react.default.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))))), (0, _react2.jsx)("div", {
+  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null))))), (0, _react2.jsx)("div", {
     css: _StyledComponents.sidebarArea
   }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.ContextPanel, {
     editorAPI: props.editorAPI,

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

@@ -13,6 +13,8 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
 var _BeforeWrapper = require("./BeforeWrapper");
 var _MainToolbar = require("./MainToolbar");
@@ -26,7 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
-  var _props$customPrimaryT;
+  var _props$customPrimaryT, _useToolbarPortal;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     shouldSplitToolbar = _useState2[0],
@@ -100,15 +102,37 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     event.preventDefault();
     event.stopPropagation();
   };
-  return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
-    var contextPanelWidth = _ref.width;
+
+  // 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.
+  var _ref = (_useToolbarPortal = (0, _ToolbarPortal.useToolbarPortal)()) !== null && _useToolbarPortal !== void 0 ? _useToolbarPortal : {
+      Portal: _react.default.Fragment
+    },
+    ToolbarPortal = _ref.Portal;
+  return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
+    var contextPanelWidth = _ref2.width;
     return (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
       editorView: props.editorView,
       childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
       isShortcutToFocusToolbar: isShortcutToFocusToolbar,
       handleEscape: handleEscape,
       intl: props.intl
+    }, (0, _platformFeatureFlags.fg)('platform_editor_lcm_toolbar_portals') ? (0, _react2.jsx)(ToolbarPortal, null, (0, _react2.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: (0, _MainToolbar.mainToolbarStyle)(props.showKeyline || contextPanelWidth > 0, twoLineEditorToolbar),
+      "data-testid": "ak-editor-main-toolbar"
     }, (0, _react2.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: (0, _MainToolbar.mainToolbarFirstChildStyle)(twoLineEditorToolbar),
+      role: "toolbar",
+      "aria-label": props.intl.formatMessage(_messages.fullPageMessages.toolbarLabel)
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), (0, _react2.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: (0, _MainToolbar.mainToolbarSecondChildStyle)(twoLineEditorToolbar),
+      "data-testid": "avatar-group-outside-plugin",
+      role: "region",
+      "aria-label": props.intl.formatMessage(_messages.fullPageMessages.pageActionsLabel)
+    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar), (0, _react2.jsx)(_ToolbarPortal.ToolbarPortalMountPoint, null))) : (0, _react2.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: (0, _MainToolbar.mainToolbarStyle)(props.showKeyline || contextPanelWidth > 0, twoLineEditorToolbar),
       "data-testid": "ak-editor-main-toolbar"
@@ -120,7 +144,7 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), (0, _react2.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: (0, _MainToolbar.mainToolbarSecondChildStyle)(twoLineEditorToolbar),
-      "data-testid": 'avatar-group-outside-plugin',
+      "data-testid": "avatar-group-outside-plugin",
       role: "region",
       "aria-label": props.intl.formatMessage(_messages.fullPageMessages.pageActionsLabel)
     }, shouldSplitToolbar ? nonCustomToolbar : customToolbar)));

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

@@ -90,7 +90,17 @@ var contentAreaHeightNoToolbar = exports.contentAreaHeightNoToolbar = (0, _react
 var sidebarArea = exports.sidebarArea = (0, _react.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/cjs/ui/ContentStyles/extension.js

@@ -18,4 +18,4 @@ var dangerOverlayStyles = (0, _react.css)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.multiBodiedExtensionView-content-wrap {\n\t\t&.danger > span > .multiBodiedExtension--container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t", "\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\tbackground-color: transparent;\n\t\t\t.multiBodiedExtension--overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .multiBodiedExtension--container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t\t.multiBodiedExtension--container {\n\t\t\twidth: 100%;\n\t\t\tmax-width: 100%; // ensure width can't go over 100%;\n\t\t}\n\t}\n\n\t.inlineExtensionView-content-wrap {\n\t\t&.danger > span > .extension-container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\t// If the macro turned used to turn red before, not setting the background to be transparent will cause the\n\t\t\t// danger state to have two layers of red which we don't want.\n\t\t\tbackground-color: transparent;\n\t\t\t.extension-overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .extension-container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t}\n\n\t// This is referenced in the toDOM of a bodied extension and is used to put\n\t// label content into the bodied extension.\n\t// We do this so that we don't serialise the label (which causes the label to be\n\t// be copied to the clipboard causing copy-paste issues).\n\t.bodied-extension-to-dom-label::after {\n\t\tcontent: attr(data-bodied-extension-label);\n\t}\n\n\t.extensionView-content-wrap,\n\t.multiBodiedExtensionView-content-wrap,\n\t.bodiedExtensionView-content-wrap {\n\t\tmargin: ", " 0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .extension-container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.danger > span > .extension-container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t", "\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\tbackground-color: transparent;\n\t\t\t.extension-overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.inline {\n\t\t\tword-wrap: break-all;\n\t\t}\n\t}\n\n\t.extensionView-content-wrap .extension-container {\n\t\toverflow: hidden;\n\t}\n\n\t.bodiedExtensionView-content-wrap .extensionView-content-wrap .extension-container {\n\t\twidth: 100%;\n\t\tmax-width: 100%; // ensure width can't go over 100%;\n\t}\n\n\t[data-mark-type='fragment'] {\n\t\t& > .extensionView-content-wrap,\n\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin: ", " 0;\n\t\t\t}\n\t\t}\n\n\t\t&:first-child {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t\t& > .extensionView-content-wrap,\n\t\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:nth-last-of-type(-n + 2):not(:first-of-type) {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\n\t\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t\t& > .extensionView-content-wrap,\n\t\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), extensionLabelStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
+var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.multiBodiedExtensionView-content-wrap {\n\t\t&.danger > span > .multiBodiedExtension--container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t", "\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\tbackground-color: transparent;\n\t\t\t.multiBodiedExtension--overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .multiBodiedExtension--container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t\t.multiBodiedExtension--container {\n\t\t\twidth: 100%;\n\t\t\tmax-width: 100%; // ensure width can't go over 100%;\n\t\t}\n\t}\n\n\t.inlineExtensionView-content-wrap {\n\t\t&.danger > span > .extension-container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\t// If the macro turned used to turn red before, not setting the background to be transparent will cause the\n\t\t\t// danger state to have two layers of red which we don't want.\n\t\t\tbackground-color: transparent;\n\t\t\t.extension-overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .extension-container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t}\n\n\t// This is referenced in the toDOM of a bodied extension and is used to put\n\t// label content into the bodied extension.\n\t// We do this so that we don't serialise the label (which causes the label to be\n\t// be copied to the clipboard causing copy-paste issues).\n\t.bodied-extension-to-dom-label::after {\n\t\tcontent: attr(data-bodied-extension-label);\n\t}\n\n\t.extensionView-content-wrap,\n\t.multiBodiedExtensionView-content-wrap,\n\t.bodiedExtensionView-content-wrap {\n\t\tmargin: ", " 0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .extension-container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.danger > span > .extension-container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t", "\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\tbackground-color: transparent;\n\t\t\t.extension-overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.inline {\n\t\t\tword-wrap: break-all;\n\t\t}\n\t}\n\n\t.extensionView-content-wrap .extension-container {\n\t\toverflow: hidden;\n\n\t\t/* Don't hide overflow for editors inside extensions */\n\t\t&:has(.extension-editable-area) {\n\t\t\toverflow: visible;\n\t\t}\n\t}\n\n\t.bodiedExtensionView-content-wrap .extensionView-content-wrap .extension-container {\n\t\twidth: 100%;\n\t\tmax-width: 100%; // ensure width can't go over 100%;\n\t}\n\n\t[data-mark-type='fragment'] {\n\t\t& > .extensionView-content-wrap,\n\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin: ", " 0;\n\t\t\t}\n\t\t}\n\n\t\t&:first-child {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t\t& > .extensionView-content-wrap,\n\t\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:nth-last-of-type(-n + 2):not(:first-of-type) {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\n\t\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t\t& > .extensionView-content-wrap,\n\t\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), extensionLabelStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);

package/dist/cjs/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/cjs/ui/Toolbar/ToolbarPortal.js

@@ -0,0 +1,48 @@
+/* ToolbarPortal.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarPortal = exports.ToolbarPortalMountPoint = exports.ToolbarPortalContextProvider = void 0;
+require("./ToolbarPortal.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var ToolbarPortalContext = /*#__PURE__*/_react.default.createContext(undefined);
+var ToolbarPortalContextProvider = exports.ToolbarPortalContextProvider = function ToolbarPortalContextProvider(_ref) {
+  var children = _ref.children,
+    portal = _ref.portal,
+    isActive = _ref.isActive;
+  var value = _react.default.useMemo(function () {
+    return {
+      Portal: portal,
+      isActive: isActive
+    };
+  }, [portal, isActive]);
+  return /*#__PURE__*/_react.default.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
+var useToolbarPortal = exports.useToolbarPortal = function useToolbarPortal() {
+  return _react.default.useContext(ToolbarPortalContext);
+};
+var toolbarPortalStyles = {
+  portal: "_1r04ze3t _kqswstnw _fiawglyw"
+};
+var ToolbarPortalMountPoint = exports.ToolbarPortalMountPoint = function ToolbarPortalMountPoint() {
+  var 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.default.createElement("div", {
+    className: (0, _runtime.ax)([toolbarPortalStyles.portal, "ak-editor-toolbar-portal"])
+  });
+};

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "203.16.5";
+var version = exports.version = "203.17.2";

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @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';
@@ -14,11 +14,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
@@ -89,7 +91,8 @@ function Editor(passedProps) {
       onSaveFromProps(view);
     }
   }, [onSaveFromProps]);
-  return jsx(EditorInternal, {
+  const 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,
@@ -100,7 +103,7 @@ function Editor(passedProps) {
     onEditorDestroyed: onEditorDestroyed,
     providerFactory: providerFactory,
     AppearanceComponent: props.AppearanceComponent
-  });
+  }));
 }
 const useMemoEditorFeatureFlags = featureFlags => {
   const ffRef = useRef(featureFlags);