@atlaskit/editor-common 111.7.3 → 111.7.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 111.7.4
+
+### Patch Changes
+
+- [`db121516e200b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db121516e200b) -
+  [ux] Update hub extention titles and radius slider style
+- [`ba05557f777bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba05557f777bf) -
+  Add support to render selection toolbar in editors which have an ancestor elemenent which has
+  position fixed, most common use case is for the chromeless appearance when rendered inside modals,
+  popups etc.
+- Updated dependencies
+
 ## 111.7.3
 
 ### Patch Changes

package/dist/cjs/messages/text-color.js

@@ -18,7 +18,7 @@ var textColorMessages = exports.textColorMessages = (0, _reactIntlNext.defineMes
   },
   textColorHighlightTooltip: {
     id: 'fabric.editor.textColorHighlightTooltip',
-    defaultMessage: 'Text and Highlight color',
+    defaultMessage: 'Text and highlight color',
     description: 'Tooltip of menu that provides access to various colors of highlight.'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "111.7.2";
+var packageVersion = "111.7.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "111.7.2";
+var packageVersion = "111.7.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/cjs/utils/calculate-toolbar-position.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calculateToolbarPositionTrackHead = exports.calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionAboveSelection = void 0;
+exports.calculateToolbarPositionTrackHeadOld = exports.calculateToolbarPositionTrackHeadNew = exports.calculateToolbarPositionTrackHead = exports.calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionAboveSelection = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var MAXIMUM_BROWSER_SCROLLBAR_WIDTH = 20;
 
 /*
@@ -85,19 +86,36 @@ var calculateToolbarPositionAboveSelection = exports.calculateToolbarPositionAbo
     };
   };
 };
-/*
-  Calculates the position of the floating toolbar relative to the selection.
-  This is a re-implementation which closely matches the behaviour on Confluence renderer.
-  The main difference is the popup is always above the selection.
-  Things to consider:
-  - stick as close to the head X release coordinates as possible
-  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
-  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
-  - we use the toolbarRect to center align toolbar
-  - use wrapperBounds to clamp values
-  - editorView.dom bounds differ to wrapperBounds, convert at the end
-*/
-var calculateToolbarPositionTrackHead = exports.calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
+var findContainingElement = function findContainingElement(editorView) {
+  // First, try to find .fabric-editor-popup-scroll-parent
+  var scrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+  if (scrollParent) {
+    return {
+      container: scrollParent,
+      isFixed: false
+    };
+  } else {
+    // If no scroll parent, look for a fixed positioned parent
+    var fixedParent = editorView.dom.parentElement;
+    while (fixedParent && fixedParent !== document.body) {
+      var computedStyle = window.getComputedStyle(fixedParent);
+      if (computedStyle.position === 'fixed') {
+        return {
+          container: fixedParent,
+          isFixed: true
+        };
+      }
+      fixedParent = fixedParent.parentElement;
+    }
+  }
+
+  // Fall back to document.body if no fixed parent found
+  return {
+    container: document.body,
+    isFixed: false
+  };
+};
+var calculateToolbarPositionTrackHeadOld = exports.calculateToolbarPositionTrackHeadOld = function calculateToolbarPositionTrackHeadOld(toolbarTitle) {
   return function (editorView, nextPos) {
     var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
     if (!toolbar) {
@@ -167,6 +185,121 @@ var calculateToolbarPositionTrackHead = exports.calculateToolbarPositionTrackHea
   };
 };
 
+/**
+ * Same logic as calculateToolbarPositionTrackHeadOld, but with the following changes:
+ * - Uses a cached container to avoid repeated DOM traversal and getComputedStyle calls
+ * - Works when editor is nested within a fixed positioned parent, such as within a modal or sidebar
+ */
+var calculateToolbarPositionTrackHeadNew = exports.calculateToolbarPositionTrackHeadNew = function calculateToolbarPositionTrackHeadNew(toolbarTitle) {
+  // Cache the container to avoid repeated DOM traversal and getComputedStyle calls
+  var cachedContainer = null;
+  var isFixedContainer = false;
+  var cachedEditorDom = null;
+  return function (editorView, nextPos) {
+    var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
+    if (!toolbar) {
+      return nextPos;
+    }
+
+    // Find and cache the container (only recalculates if editor DOM changed)
+    if (cachedEditorDom !== editorView.dom) {
+      cachedEditorDom = editorView.dom;
+      var _findContainingElemen = findContainingElement(editorView),
+        _container = _findContainingElemen.container,
+        isFixed = _findContainingElemen.isFixed;
+      cachedContainer = _container;
+      isFixedContainer = isFixed;
+    }
+    if (!cachedContainer) {
+      return nextPos;
+    }
+    var container = cachedContainer;
+    var containerBounds = container.getBoundingClientRect();
+    var selection = window && window.getSelection();
+    var moreRovoOptionsButton = document.querySelector('button[aria-label="More Rovo options"], [aria-label="More Rovo options"]');
+    var isMoreRovoOptionsButtonVisible = !!moreRovoOptionsButton && moreRovoOptionsButton instanceof HTMLElement && !!moreRovoOptionsButton.offsetParent;
+    var range = null;
+    if (isMoreRovoOptionsButtonVisible && (0, _platformFeatureFlags.fg)('platform_editor_ai_generic_prep_for_aifc')) {
+      if (selection && selection.getRangeAt && selection.rangeCount > 0) {
+        var maybeRange = selection.getRangeAt(0);
+        if (maybeRange instanceof Range) {
+          range = maybeRange;
+        }
+      }
+    } else {
+      if (selection && !selection.isCollapsed && selection.getRangeAt && selection.rangeCount > 0) {
+        var _maybeRange2 = selection.getRangeAt(0);
+        if (_maybeRange2 instanceof Range) {
+          range = _maybeRange2;
+        }
+      }
+    }
+    if (!range) {
+      return nextPos;
+    }
+    var toolbarRect = toolbar.getBoundingClientRect();
+    var _editorView$state$sel3 = editorView.state.selection,
+      head = _editorView$state$sel3.head,
+      anchor = _editorView$state$sel3.anchor;
+    var topCoords = editorView.coordsAtPos(Math.min(head, anchor));
+    var bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
+    var top;
+    // If not the same line AND we are selecting downwards, display toolbar below.
+    if (head > anchor && topCoords.top !== bottomCoords.top) {
+      // We are taking the previous pos to the maxium, so avoid end of line positions
+      // returning the next line's rect.
+      top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
+    } else {
+      top = (topCoords.top || 0) - toolbarRect.height * 1.5;
+    }
+    var left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
+
+    // Place toolbar below selection if not sufficient space above
+    if (top < containerBounds.top) {
+      var _getCoordsBelowSelect3 = getCoordsBelowSelection(bottomCoords, toolbarRect);
+      top = _getCoordsBelowSelect3.top;
+      left = _getCoordsBelowSelect3.left;
+    }
+    var leftCoord = Math.max(0, left - containerBounds.left);
+    if (leftCoord + toolbarRect.width > containerBounds.width) {
+      var _scrollbarWidth2 = MAXIMUM_BROWSER_SCROLLBAR_WIDTH;
+      leftCoord = Math.max(0, containerBounds.width - (toolbarRect.width + _scrollbarWidth2));
+    }
+
+    // Apply scroll offset only for non-fixed containers
+    // Fixed positioned elements don't scroll with the page
+    var scrollOffset = isFixedContainer ? 0 : container.scrollTop;
+    return {
+      top: top - containerBounds.top + scrollOffset,
+      left: leftCoord
+    };
+  };
+};
+
+/*
+  Calculates the position of the floating toolbar relative to the selection.
+  This implementation works in multiple scenarios:
+  - Standard scrollable containers with .fabric-editor-popup-scroll-parent
+  - Fixed positioned parent containers
+  - Falls back to document.body
+
+  The function automatically detects the container type and applies the appropriate
+  positioning logic and scroll offset handling.
+
+  Things to consider:
+  - stick as close to the head X release coordinates as possible
+  - coordinates of head X and getBoundingClientRect() are absolute in client viewport
+  - popup may appear in '.fabric-editor-popup-scroll-parent', fixed parent, or body
+  - we use the toolbarRect to center align toolbar
+  - use container bounds to clamp values
+  - for fixed positioning, no scroll offsets are applied
+  - for scrollable containers, scroll offsets are included
+*/
+var calculateToolbarPositionTrackHead = exports.calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
+  var isSelToolbarFixEnabled = (0, _expValEquals.expValEquals)('platform_editor_sel_toolbar_fix', 'isEnabled', true);
+  return isSelToolbarFixEnabled ? calculateToolbarPositionTrackHeadNew(toolbarTitle) : calculateToolbarPositionTrackHeadOld(toolbarTitle);
+};
+
 /**
  * Returns the coordintes at the bottom the selection.
  */

package/dist/es2019/messages/text-color.js

@@ -12,7 +12,7 @@ export const textColorMessages = defineMessages({
   },
   textColorHighlightTooltip: {
     id: 'fabric.editor.textColorHighlightTooltip',
-    defaultMessage: 'Text and Highlight color',
+    defaultMessage: 'Text and highlight color',
     description: 'Tooltip of menu that provides access to various colors of highlight.'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "111.7.2";
+const packageVersion = "111.7.3";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/ui/DropList/index.js

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "111.7.2";
+const packageVersion = "111.7.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/es2019/utils/calculate-toolbar-position.js

@@ -1,6 +1,7 @@
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const MAXIMUM_BROWSER_SCROLLBAR_WIDTH = 20;
 
 /*
@@ -79,19 +80,36 @@ export const calculateToolbarPositionAboveSelection = toolbarTitle => (editorVie
     left: Math.max(0, left - wrapperBounds.left)
   };
 };
-/*
-  Calculates the position of the floating toolbar relative to the selection.
-  This is a re-implementation which closely matches the behaviour on Confluence renderer.
-  The main difference is the popup is always above the selection.
-  Things to consider:
-  - stick as close to the head X release coordinates as possible
-  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
-  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
-  - we use the toolbarRect to center align toolbar
-  - use wrapperBounds to clamp values
-  - editorView.dom bounds differ to wrapperBounds, convert at the end
-*/
-export const calculateToolbarPositionTrackHead = toolbarTitle => (editorView, nextPos) => {
+const findContainingElement = editorView => {
+  // First, try to find .fabric-editor-popup-scroll-parent
+  const scrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+  if (scrollParent) {
+    return {
+      container: scrollParent,
+      isFixed: false
+    };
+  } else {
+    // If no scroll parent, look for a fixed positioned parent
+    let fixedParent = editorView.dom.parentElement;
+    while (fixedParent && fixedParent !== document.body) {
+      const computedStyle = window.getComputedStyle(fixedParent);
+      if (computedStyle.position === 'fixed') {
+        return {
+          container: fixedParent,
+          isFixed: true
+        };
+      }
+      fixedParent = fixedParent.parentElement;
+    }
+  }
+
+  // Fall back to document.body if no fixed parent found
+  return {
+    container: document.body,
+    isFixed: false
+  };
+};
+export const calculateToolbarPositionTrackHeadOld = toolbarTitle => (editorView, nextPos) => {
   const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
   if (!toolbar) {
     return nextPos;
@@ -161,6 +179,124 @@ export const calculateToolbarPositionTrackHead = toolbarTitle => (editorView, ne
   };
 };
 
+/**
+ * Same logic as calculateToolbarPositionTrackHeadOld, but with the following changes:
+ * - Uses a cached container to avoid repeated DOM traversal and getComputedStyle calls
+ * - Works when editor is nested within a fixed positioned parent, such as within a modal or sidebar
+ */
+export const calculateToolbarPositionTrackHeadNew = toolbarTitle => {
+  // Cache the container to avoid repeated DOM traversal and getComputedStyle calls
+  let cachedContainer = null;
+  let isFixedContainer = false;
+  let cachedEditorDom = null;
+  return (editorView, nextPos) => {
+    const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
+    if (!toolbar) {
+      return nextPos;
+    }
+
+    // Find and cache the container (only recalculates if editor DOM changed)
+    if (cachedEditorDom !== editorView.dom) {
+      cachedEditorDom = editorView.dom;
+      const {
+        container,
+        isFixed
+      } = findContainingElement(editorView);
+      cachedContainer = container;
+      isFixedContainer = isFixed;
+    }
+    if (!cachedContainer) {
+      return nextPos;
+    }
+    const container = cachedContainer;
+    const containerBounds = container.getBoundingClientRect();
+    const selection = window && window.getSelection();
+    const moreRovoOptionsButton = document.querySelector('button[aria-label="More Rovo options"], [aria-label="More Rovo options"]');
+    const isMoreRovoOptionsButtonVisible = !!moreRovoOptionsButton && moreRovoOptionsButton instanceof HTMLElement && !!moreRovoOptionsButton.offsetParent;
+    let range = null;
+    if (isMoreRovoOptionsButtonVisible && fg('platform_editor_ai_generic_prep_for_aifc')) {
+      if (selection && selection.getRangeAt && selection.rangeCount > 0) {
+        const maybeRange = selection.getRangeAt(0);
+        if (maybeRange instanceof Range) {
+          range = maybeRange;
+        }
+      }
+    } else {
+      if (selection && !selection.isCollapsed && selection.getRangeAt && selection.rangeCount > 0) {
+        const maybeRange = selection.getRangeAt(0);
+        if (maybeRange instanceof Range) {
+          range = maybeRange;
+        }
+      }
+    }
+    if (!range) {
+      return nextPos;
+    }
+    const toolbarRect = toolbar.getBoundingClientRect();
+    const {
+      head,
+      anchor
+    } = editorView.state.selection;
+    const topCoords = editorView.coordsAtPos(Math.min(head, anchor));
+    const bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
+    let top;
+    // If not the same line AND we are selecting downwards, display toolbar below.
+    if (head > anchor && topCoords.top !== bottomCoords.top) {
+      // We are taking the previous pos to the maxium, so avoid end of line positions
+      // returning the next line's rect.
+      top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
+    } else {
+      top = (topCoords.top || 0) - toolbarRect.height * 1.5;
+    }
+    let left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
+
+    // Place toolbar below selection if not sufficient space above
+    if (top < containerBounds.top) {
+      ({
+        top,
+        left
+      } = getCoordsBelowSelection(bottomCoords, toolbarRect));
+    }
+    let leftCoord = Math.max(0, left - containerBounds.left);
+    if (leftCoord + toolbarRect.width > containerBounds.width) {
+      const scrollbarWidth = MAXIMUM_BROWSER_SCROLLBAR_WIDTH;
+      leftCoord = Math.max(0, containerBounds.width - (toolbarRect.width + scrollbarWidth));
+    }
+
+    // Apply scroll offset only for non-fixed containers
+    // Fixed positioned elements don't scroll with the page
+    const scrollOffset = isFixedContainer ? 0 : container.scrollTop;
+    return {
+      top: top - containerBounds.top + scrollOffset,
+      left: leftCoord
+    };
+  };
+};
+
+/*
+  Calculates the position of the floating toolbar relative to the selection.
+  This implementation works in multiple scenarios:
+  - Standard scrollable containers with .fabric-editor-popup-scroll-parent
+  - Fixed positioned parent containers
+  - Falls back to document.body
+
+  The function automatically detects the container type and applies the appropriate
+  positioning logic and scroll offset handling.
+
+  Things to consider:
+  - stick as close to the head X release coordinates as possible
+  - coordinates of head X and getBoundingClientRect() are absolute in client viewport
+  - popup may appear in '.fabric-editor-popup-scroll-parent', fixed parent, or body
+  - we use the toolbarRect to center align toolbar
+  - use container bounds to clamp values
+  - for fixed positioning, no scroll offsets are applied
+  - for scrollable containers, scroll offsets are included
+*/
+export const calculateToolbarPositionTrackHead = toolbarTitle => {
+  const isSelToolbarFixEnabled = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true);
+  return isSelToolbarFixEnabled ? calculateToolbarPositionTrackHeadNew(toolbarTitle) : calculateToolbarPositionTrackHeadOld(toolbarTitle);
+};
+
 /**
  * Returns the coordintes at the bottom the selection.
  */

package/dist/esm/messages/text-color.js

@@ -12,7 +12,7 @@ export var textColorMessages = defineMessages({
   },
   textColorHighlightTooltip: {
     id: 'fabric.editor.textColorHighlightTooltip',
-    defaultMessage: 'Text and Highlight color',
+    defaultMessage: 'Text and highlight color',
     description: 'Tooltip of menu that provides access to various colors of highlight.'
   }
 });

package/dist/esm/monitoring/error.js

@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "111.7.2";
+var packageVersion = "111.7.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "111.7.2";
+var packageVersion = "111.7.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/esm/utils/calculate-toolbar-position.js

@@ -1,6 +1,7 @@
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var MAXIMUM_BROWSER_SCROLLBAR_WIDTH = 20;
 
 /*
@@ -79,19 +80,36 @@ export var calculateToolbarPositionAboveSelection = function calculateToolbarPos
     };
   };
 };
-/*
-  Calculates the position of the floating toolbar relative to the selection.
-  This is a re-implementation which closely matches the behaviour on Confluence renderer.
-  The main difference is the popup is always above the selection.
-  Things to consider:
-  - stick as close to the head X release coordinates as possible
-  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
-  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
-  - we use the toolbarRect to center align toolbar
-  - use wrapperBounds to clamp values
-  - editorView.dom bounds differ to wrapperBounds, convert at the end
-*/
-export var calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
+var findContainingElement = function findContainingElement(editorView) {
+  // First, try to find .fabric-editor-popup-scroll-parent
+  var scrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+  if (scrollParent) {
+    return {
+      container: scrollParent,
+      isFixed: false
+    };
+  } else {
+    // If no scroll parent, look for a fixed positioned parent
+    var fixedParent = editorView.dom.parentElement;
+    while (fixedParent && fixedParent !== document.body) {
+      var computedStyle = window.getComputedStyle(fixedParent);
+      if (computedStyle.position === 'fixed') {
+        return {
+          container: fixedParent,
+          isFixed: true
+        };
+      }
+      fixedParent = fixedParent.parentElement;
+    }
+  }
+
+  // Fall back to document.body if no fixed parent found
+  return {
+    container: document.body,
+    isFixed: false
+  };
+};
+export var calculateToolbarPositionTrackHeadOld = function calculateToolbarPositionTrackHeadOld(toolbarTitle) {
   return function (editorView, nextPos) {
     var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
     if (!toolbar) {
@@ -161,6 +179,121 @@ export var calculateToolbarPositionTrackHead = function calculateToolbarPosition
   };
 };
 
+/**
+ * Same logic as calculateToolbarPositionTrackHeadOld, but with the following changes:
+ * - Uses a cached container to avoid repeated DOM traversal and getComputedStyle calls
+ * - Works when editor is nested within a fixed positioned parent, such as within a modal or sidebar
+ */
+export var calculateToolbarPositionTrackHeadNew = function calculateToolbarPositionTrackHeadNew(toolbarTitle) {
+  // Cache the container to avoid repeated DOM traversal and getComputedStyle calls
+  var cachedContainer = null;
+  var isFixedContainer = false;
+  var cachedEditorDom = null;
+  return function (editorView, nextPos) {
+    var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
+    if (!toolbar) {
+      return nextPos;
+    }
+
+    // Find and cache the container (only recalculates if editor DOM changed)
+    if (cachedEditorDom !== editorView.dom) {
+      cachedEditorDom = editorView.dom;
+      var _findContainingElemen = findContainingElement(editorView),
+        _container = _findContainingElemen.container,
+        isFixed = _findContainingElemen.isFixed;
+      cachedContainer = _container;
+      isFixedContainer = isFixed;
+    }
+    if (!cachedContainer) {
+      return nextPos;
+    }
+    var container = cachedContainer;
+    var containerBounds = container.getBoundingClientRect();
+    var selection = window && window.getSelection();
+    var moreRovoOptionsButton = document.querySelector('button[aria-label="More Rovo options"], [aria-label="More Rovo options"]');
+    var isMoreRovoOptionsButtonVisible = !!moreRovoOptionsButton && moreRovoOptionsButton instanceof HTMLElement && !!moreRovoOptionsButton.offsetParent;
+    var range = null;
+    if (isMoreRovoOptionsButtonVisible && fg('platform_editor_ai_generic_prep_for_aifc')) {
+      if (selection && selection.getRangeAt && selection.rangeCount > 0) {
+        var maybeRange = selection.getRangeAt(0);
+        if (maybeRange instanceof Range) {
+          range = maybeRange;
+        }
+      }
+    } else {
+      if (selection && !selection.isCollapsed && selection.getRangeAt && selection.rangeCount > 0) {
+        var _maybeRange2 = selection.getRangeAt(0);
+        if (_maybeRange2 instanceof Range) {
+          range = _maybeRange2;
+        }
+      }
+    }
+    if (!range) {
+      return nextPos;
+    }
+    var toolbarRect = toolbar.getBoundingClientRect();
+    var _editorView$state$sel3 = editorView.state.selection,
+      head = _editorView$state$sel3.head,
+      anchor = _editorView$state$sel3.anchor;
+    var topCoords = editorView.coordsAtPos(Math.min(head, anchor));
+    var bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
+    var top;
+    // If not the same line AND we are selecting downwards, display toolbar below.
+    if (head > anchor && topCoords.top !== bottomCoords.top) {
+      // We are taking the previous pos to the maxium, so avoid end of line positions
+      // returning the next line's rect.
+      top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
+    } else {
+      top = (topCoords.top || 0) - toolbarRect.height * 1.5;
+    }
+    var left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
+
+    // Place toolbar below selection if not sufficient space above
+    if (top < containerBounds.top) {
+      var _getCoordsBelowSelect3 = getCoordsBelowSelection(bottomCoords, toolbarRect);
+      top = _getCoordsBelowSelect3.top;
+      left = _getCoordsBelowSelect3.left;
+    }
+    var leftCoord = Math.max(0, left - containerBounds.left);
+    if (leftCoord + toolbarRect.width > containerBounds.width) {
+      var _scrollbarWidth2 = MAXIMUM_BROWSER_SCROLLBAR_WIDTH;
+      leftCoord = Math.max(0, containerBounds.width - (toolbarRect.width + _scrollbarWidth2));
+    }
+
+    // Apply scroll offset only for non-fixed containers
+    // Fixed positioned elements don't scroll with the page
+    var scrollOffset = isFixedContainer ? 0 : container.scrollTop;
+    return {
+      top: top - containerBounds.top + scrollOffset,
+      left: leftCoord
+    };
+  };
+};
+
+/*
+  Calculates the position of the floating toolbar relative to the selection.
+  This implementation works in multiple scenarios:
+  - Standard scrollable containers with .fabric-editor-popup-scroll-parent
+  - Fixed positioned parent containers
+  - Falls back to document.body
+
+  The function automatically detects the container type and applies the appropriate
+  positioning logic and scroll offset handling.
+
+  Things to consider:
+  - stick as close to the head X release coordinates as possible
+  - coordinates of head X and getBoundingClientRect() are absolute in client viewport
+  - popup may appear in '.fabric-editor-popup-scroll-parent', fixed parent, or body
+  - we use the toolbarRect to center align toolbar
+  - use container bounds to clamp values
+  - for fixed positioning, no scroll offsets are applied
+  - for scrollable containers, scroll offsets are included
+*/
+export var calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
+  var isSelToolbarFixEnabled = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true);
+  return isSelToolbarFixEnabled ? calculateToolbarPositionTrackHeadNew(toolbarTitle) : calculateToolbarPositionTrackHeadOld(toolbarTitle);
+};
+
 /**
  * Returns the coordintes at the bottom the selection.
  */

package/dist/types/utils/calculate-toolbar-position.d.ts

@@ -1,6 +1,13 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PopupPosition as Position } from '../ui';
 export declare const calculateToolbarPositionAboveSelection: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
+export declare const calculateToolbarPositionTrackHeadOld: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
+/**
+ * Same logic as calculateToolbarPositionTrackHeadOld, but with the following changes:
+ * - Uses a cached container to avoid repeated DOM traversal and getComputedStyle calls
+ * - Works when editor is nested within a fixed positioned parent, such as within a modal or sidebar
+ */
+export declare const calculateToolbarPositionTrackHeadNew: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
 export declare const calculateToolbarPositionTrackHead: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
 export type CoordsAtPos = {
     bottom: number;

package/dist/types-ts4.5/utils/calculate-toolbar-position.d.ts

@@ -1,6 +1,13 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PopupPosition as Position } from '../ui';
 export declare const calculateToolbarPositionAboveSelection: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
+export declare const calculateToolbarPositionTrackHeadOld: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
+/**
+ * Same logic as calculateToolbarPositionTrackHeadOld, but with the following changes:
+ * - Uses a cached container to avoid repeated DOM traversal and getComputedStyle calls
+ * - Works when editor is nested within a fixed positioned parent, such as within a modal or sidebar
+ */
+export declare const calculateToolbarPositionTrackHeadNew: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
 export declare const calculateToolbarPositionTrackHead: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
 export type CoordsAtPos = {
     bottom: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "111.7.3",
+	"version": "111.7.4",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/profilecard": "^24.29.0",
+		"@atlaskit/profilecard": "^24.30.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@atlaskit/react-ufo": "^4.17.0",
 		"@atlaskit/section-message": "^8.12.0",
@@ -81,9 +81,9 @@
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.15.0",
+		"@atlaskit/tmp-editor-statsig": "^16.18.0",
 		"@atlaskit/tokens": "^9.1.0",
-		"@atlaskit/tooltip": "^20.13.0",
+		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/width-detector": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",