@atlaskit/editor-plugin-paste-options-toolbar 9.0.4 → 9.0.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-paste-options-toolbar
 
+## 9.0.6
+
+### Patch Changes
+
+- [`2b33e02e33a67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2b33e02e33a67) -
+  [ux] [EDITOR-5880] paste menu position fix so it sticks on screen when pasting large content
+- Updated dependencies
+
+## 9.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.0.4
 
 ### Patch Changes

package/dist/cjs/pm-plugins/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEXT_HIGHLIGHT_CLASS = exports.PASTE_TOOLBAR_MENU_ID = exports.PASTE_TOOLBAR_ITEM_CLASS = exports.PASTE_TOOLBAR_CLASS = exports.PASTE_OPTIONS_TEST_ID = exports.PASTE_OPTIONS_META_ID = exports.PASTE_MENU_GAP = exports.PASTE_HIGHLIGHT_DECORATION_KEY = exports.EDITOR_WRAPPER_CLASS = void 0;
+exports.TEXT_HIGHLIGHT_CLASS = exports.PASTE_TOOLBAR_MENU_ID = exports.PASTE_TOOLBAR_ITEM_CLASS = exports.PASTE_TOOLBAR_CLASS = exports.PASTE_OPTIONS_TEST_ID = exports.PASTE_OPTIONS_META_ID = exports.PASTE_MENU_GAP_TOP = exports.PASTE_MENU_GAP_HORIZONTAL = exports.PASTE_HIGHLIGHT_DECORATION_KEY = exports.EDITOR_WRAPPER_CLASS = void 0;
 var PASTE_TOOLBAR_CLASS = exports.PASTE_TOOLBAR_CLASS = 'ak-editor-paste-toolbar';
 var PASTE_TOOLBAR_MENU_ID = exports.PASTE_TOOLBAR_MENU_ID = 'ak-editor-paste-toolbar-item-dropdownList';
 var TEXT_HIGHLIGHT_CLASS = exports.TEXT_HIGHLIGHT_CLASS = 'text-highlight';
@@ -12,6 +12,5 @@ var PASTE_TOOLBAR_ITEM_CLASS = exports.PASTE_TOOLBAR_ITEM_CLASS = 'ak-editor-pas
 var EDITOR_WRAPPER_CLASS = exports.EDITOR_WRAPPER_CLASS = 'akEditor';
 var PASTE_OPTIONS_TEST_ID = exports.PASTE_OPTIONS_TEST_ID = 'paste-options-testid';
 var PASTE_OPTIONS_META_ID = exports.PASTE_OPTIONS_META_ID = 'paste-options$';
-
-// Gap (in px) between the right edge of the pasted content and the left edge of the paste menu.
-var PASTE_MENU_GAP = exports.PASTE_MENU_GAP = 12;
+var PASTE_MENU_GAP_HORIZONTAL = exports.PASTE_MENU_GAP_HORIZONTAL = 8;
+var PASTE_MENU_GAP_TOP = exports.PASTE_MENU_GAP_TOP = 24;

package/dist/cjs/ui/on-paste-actions-menu/PasteActionsMenu.js

@@ -41,26 +41,44 @@ function getTargetElement(editorView, pos) {
 
 /**
  * Adjusts the vertical position of the paste menu to align with the top of the
- * pasted content using the exact coordinates at the paste start position.
+ * pasted content using the exact coordinates at the paste start position,
+ * and sticks the menu to the top of the scroll container when the pasted
+ * content scrolls above the visible area.
  *
- * The Popup's vertical placement may place the popup below the target element
- * (alignY="bottom"). This override computes the correct top position using
- * coordsAtPos for the paste start, then converts to the Popup's coordinate
- * system by calculating the delta from the target element's bottom (where the
- * Popup positions by default) to the paste start coordinates.
+ * The Popup uses alignY="bottom", which positions the popup below the target
+ * element's bottom edge. This override:
+ *
+ * 1. Shifts the popup from the target's bottom edge to align with the paste
+ *    start position.
+ * 2. When the paste start scrolls above the scroll container, clamps the menu
+ *    to the scroll container's top edge (sticky-top).
+ * 3. Stops sticking once the entire pasted range (pasteEndPos) has scrolled
+ *    above the visible area.
  */
-function onPositionCalculated(editorView, pasteStartPos, targetElement) {
+function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, targetElement, scrollableElement) {
   return function (position) {
     var _position$top;
     var startCoords = editorView.coordsAtPos(pasteStartPos);
+    var endCoords = editorView.coordsAtPos(pasteEndPos);
     var targetRect = targetElement.getBoundingClientRect();
 
     // The Popup places the menu at the target's bottom edge by default.
-    // We need to shift it up so it aligns with the paste start position.
+    // We shift it up so it aligns with the paste start position.
     // Both coordinates are in viewport space, so the delta is offset-parent agnostic.
     var topDelta = startCoords.top - (targetRect.top + targetRect.height);
+    var adjustedTop = ((_position$top = position.top) !== null && _position$top !== void 0 ? _position$top : 0) + topDelta;
+
+    // Sticky-top: clamp to the scroll container's top edge when the paste
+    // start has scrolled above the visible area, but only while some pasted
+    // content is still visible.
+    if (scrollableElement) {
+      var scrollContainerTop = scrollableElement.getBoundingClientRect().top;
+      if (startCoords.top < scrollContainerTop && endCoords.bottom > scrollContainerTop) {
+        adjustedTop += scrollContainerTop - startCoords.top + _constants.PASTE_MENU_GAP_TOP;
+      }
+    }
     return _objectSpread(_objectSpread({}, position), {}, {
-      top: ((_position$top = position.top) !== null && _position$top !== void 0 ? _position$top : 0) + topDelta
+      top: adjustedTop
     });
   };
 }
@@ -102,15 +120,17 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
     (0, _commands.showToolbar)(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
   }, [lastContentPasted, editorView]);
   var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['pasteOptionsToolbarPlugin'], function (states) {
-      var _pluginState$showTool, _pluginState$pasteSta;
+      var _pluginState$showTool, _pluginState$pasteSta, _pluginState$pasteEnd;
       var pluginState = states.pasteOptionsToolbarPluginState;
       return {
         showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false,
-        pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0
+        pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
+        pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0
       };
     }),
     isToolbarShown = _useSharedPluginState2.showToolbar,
-    pasteStartPos = _useSharedPluginState2.pasteStartPos;
+    pasteStartPos = _useSharedPluginState2.pasteStartPos,
+    pasteEndPos = _useSharedPluginState2.pasteEndPos;
   var aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents('ai-paste-menu')) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var visibleAiActionKeys = (0, _hasVisibleButton.getVisibleKeys)(aiSurfaceComponents, ['button', 'menu-item']);
   (0, _react.useEffect)(function () {
@@ -150,6 +170,15 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
       handleDismiss();
     }
   }, [handleDismiss]);
+
+  // Find the actual scroll container using the same utility the Popup's
+  // stick prop uses internally. We pass this as the scrollableElement prop
+  // so the Popup attaches its built-in scroll listener, which calls
+  // scheduledUpdatePosition (RAF-throttled) on each scroll event — triggering
+  // onPositionCalculated with fresh viewport coordinates.
+  var targetForScroll = isToolbarShown ? getTargetElement(editorView, pasteStartPos) : null;
+  var overflowScrollParent = targetForScroll ? (0, _ui.findOverflowScrollParent)(targetForScroll) : false;
+  var effectiveScrollableElement = overflowScrollParent || scrollableElement;
   var pasteMenuComponents = (_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(_toolbar.PASTE_MENU.key)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [];
   var anyComponentVisible = (0, _hasVisibleButton.hasVisibleButton)(pasteMenuComponents);
   if (!isToolbarShown) {
@@ -166,12 +195,13 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
     target: target,
     mountTo: mountTo,
     boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
+    scrollableElement: effectiveScrollableElement,
+    minPopupMargin: _constants.PASTE_MENU_GAP_HORIZONTAL,
     zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
     alignX: "end",
     alignY: "bottom",
-    offset: [_constants.PASTE_MENU_GAP, 0],
-    onPositionCalculated: onPositionCalculated(editorView, pasteStartPos, target),
+    offset: [_constants.PASTE_MENU_GAP_HORIZONTAL, 0],
+    onPositionCalculated: onPositionCalculated(editorView, pasteStartPos, pasteEndPos, target, effectiveScrollableElement),
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: handleDismiss
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {

package/dist/es2019/pm-plugins/constants.js

@@ -6,6 +6,5 @@ export const PASTE_TOOLBAR_ITEM_CLASS = 'ak-editor-paste-toolbar-item';
 export const EDITOR_WRAPPER_CLASS = 'akEditor';
 export const PASTE_OPTIONS_TEST_ID = 'paste-options-testid';
 export const PASTE_OPTIONS_META_ID = 'paste-options$';
-
-// Gap (in px) between the right edge of the pasted content and the left edge of the paste menu.
-export const PASTE_MENU_GAP = 12;
+export const PASTE_MENU_GAP_HORIZONTAL = 8;
+export const PASTE_MENU_GAP_TOP = 24;

package/dist/es2019/ui/on-paste-actions-menu/PasteActionsMenu.js

@@ -2,13 +2,13 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { EditorToolbarProvider, PASTE_MENU } from '@atlaskit/editor-common/toolbar';
-import { Popup } from '@atlaskit/editor-common/ui';
+import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { hideToolbar, highlightContent, showToolbar } from '../../editor-commands/commands';
-import { PASTE_MENU_GAP } from '../../pm-plugins/constants';
+import { PASTE_MENU_GAP_HORIZONTAL, PASTE_MENU_GAP_TOP } from '../../pm-plugins/constants';
 import { ToolbarDropdownOption } from '../../types/types';
 import { isToolbarVisible } from '../toolbar';
 import { getVisibleKeys, hasVisibleButton } from './hasVisibleButton';
@@ -28,27 +28,45 @@ function getTargetElement(editorView, pos) {
 
 /**
  * Adjusts the vertical position of the paste menu to align with the top of the
- * pasted content using the exact coordinates at the paste start position.
+ * pasted content using the exact coordinates at the paste start position,
+ * and sticks the menu to the top of the scroll container when the pasted
+ * content scrolls above the visible area.
  *
- * The Popup's vertical placement may place the popup below the target element
- * (alignY="bottom"). This override computes the correct top position using
- * coordsAtPos for the paste start, then converts to the Popup's coordinate
- * system by calculating the delta from the target element's bottom (where the
- * Popup positions by default) to the paste start coordinates.
+ * The Popup uses alignY="bottom", which positions the popup below the target
+ * element's bottom edge. This override:
+ *
+ * 1. Shifts the popup from the target's bottom edge to align with the paste
+ *    start position.
+ * 2. When the paste start scrolls above the scroll container, clamps the menu
+ *    to the scroll container's top edge (sticky-top).
+ * 3. Stops sticking once the entire pasted range (pasteEndPos) has scrolled
+ *    above the visible area.
  */
-export function onPositionCalculated(editorView, pasteStartPos, targetElement) {
+export function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, targetElement, scrollableElement) {
   return position => {
     var _position$top;
     const startCoords = editorView.coordsAtPos(pasteStartPos);
+    const endCoords = editorView.coordsAtPos(pasteEndPos);
     const targetRect = targetElement.getBoundingClientRect();
 
     // The Popup places the menu at the target's bottom edge by default.
-    // We need to shift it up so it aligns with the paste start position.
+    // We shift it up so it aligns with the paste start position.
     // Both coordinates are in viewport space, so the delta is offset-parent agnostic.
     const topDelta = startCoords.top - (targetRect.top + targetRect.height);
+    let adjustedTop = ((_position$top = position.top) !== null && _position$top !== void 0 ? _position$top : 0) + topDelta;
+
+    // Sticky-top: clamp to the scroll container's top edge when the paste
+    // start has scrolled above the visible area, but only while some pasted
+    // content is still visible.
+    if (scrollableElement) {
+      const scrollContainerTop = scrollableElement.getBoundingClientRect().top;
+      if (startCoords.top < scrollContainerTop && endCoords.bottom > scrollContainerTop) {
+        adjustedTop += scrollContainerTop - startCoords.top + PASTE_MENU_GAP_TOP;
+      }
+    }
     return {
       ...position,
-      top: ((_position$top = position.top) !== null && _position$top !== void 0 ? _position$top : 0) + topDelta
+      top: adjustedTop
     };
   };
 }
@@ -93,13 +111,15 @@ export const PasteActionsMenu = ({
   }, [lastContentPasted, editorView]);
   const {
     showToolbar: isToolbarShown,
-    pasteStartPos
+    pasteStartPos,
+    pasteEndPos
   } = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], states => {
-    var _pluginState$showTool, _pluginState$pasteSta;
+    var _pluginState$showTool, _pluginState$pasteSta, _pluginState$pasteEnd;
     const pluginState = states.pasteOptionsToolbarPluginState;
     return {
       showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false,
-      pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0
+      pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
+      pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0
     };
   });
   const aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents('ai-paste-menu')) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
@@ -141,6 +161,15 @@ export const PasteActionsMenu = ({
       handleDismiss();
     }
   }, [handleDismiss]);
+
+  // Find the actual scroll container using the same utility the Popup's
+  // stick prop uses internally. We pass this as the scrollableElement prop
+  // so the Popup attaches its built-in scroll listener, which calls
+  // scheduledUpdatePosition (RAF-throttled) on each scroll event — triggering
+  // onPositionCalculated with fresh viewport coordinates.
+  const targetForScroll = isToolbarShown ? getTargetElement(editorView, pasteStartPos) : null;
+  const overflowScrollParent = targetForScroll ? findOverflowScrollParent(targetForScroll) : false;
+  const effectiveScrollableElement = overflowScrollParent || scrollableElement;
   const pasteMenuComponents = (_api$uiControlRegistr3 = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(PASTE_MENU.key)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [];
   const anyComponentVisible = hasVisibleButton(pasteMenuComponents);
   if (!isToolbarShown) {
@@ -157,12 +186,13 @@ export const PasteActionsMenu = ({
     target: target,
     mountTo: mountTo,
     boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
+    scrollableElement: effectiveScrollableElement,
+    minPopupMargin: PASTE_MENU_GAP_HORIZONTAL,
     zIndex: akEditorFloatingPanelZIndex,
     alignX: "end",
     alignY: "bottom",
-    offset: [PASTE_MENU_GAP, 0],
-    onPositionCalculated: onPositionCalculated(editorView, pasteStartPos, target),
+    offset: [PASTE_MENU_GAP_HORIZONTAL, 0],
+    onPositionCalculated: onPositionCalculated(editorView, pasteStartPos, pasteEndPos, target, effectiveScrollableElement),
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: handleDismiss
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {

package/dist/esm/pm-plugins/constants.js

@@ -6,6 +6,5 @@ export var PASTE_TOOLBAR_ITEM_CLASS = 'ak-editor-paste-toolbar-item';
 export var EDITOR_WRAPPER_CLASS = 'akEditor';
 export var PASTE_OPTIONS_TEST_ID = 'paste-options-testid';
 export var PASTE_OPTIONS_META_ID = 'paste-options$';
-
-// Gap (in px) between the right edge of the pasted content and the left edge of the paste menu.
-export var PASTE_MENU_GAP = 12;
+export var PASTE_MENU_GAP_HORIZONTAL = 8;
+export var PASTE_MENU_GAP_TOP = 24;

package/dist/esm/ui/on-paste-actions-menu/PasteActionsMenu.js

@@ -5,13 +5,13 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { EditorToolbarProvider, PASTE_MENU } from '@atlaskit/editor-common/toolbar';
-import { Popup } from '@atlaskit/editor-common/ui';
+import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { hideToolbar, highlightContent, showToolbar } from '../../editor-commands/commands';
-import { PASTE_MENU_GAP } from '../../pm-plugins/constants';
+import { PASTE_MENU_GAP_HORIZONTAL, PASTE_MENU_GAP_TOP } from '../../pm-plugins/constants';
 import { ToolbarDropdownOption } from '../../types/types';
 import { isToolbarVisible } from '../toolbar';
 import { getVisibleKeys, hasVisibleButton } from './hasVisibleButton';
@@ -31,26 +31,44 @@ function getTargetElement(editorView, pos) {
 
 /**
  * Adjusts the vertical position of the paste menu to align with the top of the
- * pasted content using the exact coordinates at the paste start position.
+ * pasted content using the exact coordinates at the paste start position,
+ * and sticks the menu to the top of the scroll container when the pasted
+ * content scrolls above the visible area.
  *
- * The Popup's vertical placement may place the popup below the target element
- * (alignY="bottom"). This override computes the correct top position using
- * coordsAtPos for the paste start, then converts to the Popup's coordinate
- * system by calculating the delta from the target element's bottom (where the
- * Popup positions by default) to the paste start coordinates.
+ * The Popup uses alignY="bottom", which positions the popup below the target
+ * element's bottom edge. This override:
+ *
+ * 1. Shifts the popup from the target's bottom edge to align with the paste
+ *    start position.
+ * 2. When the paste start scrolls above the scroll container, clamps the menu
+ *    to the scroll container's top edge (sticky-top).
+ * 3. Stops sticking once the entire pasted range (pasteEndPos) has scrolled
+ *    above the visible area.
  */
-export function onPositionCalculated(editorView, pasteStartPos, targetElement) {
+export function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, targetElement, scrollableElement) {
   return function (position) {
     var _position$top;
     var startCoords = editorView.coordsAtPos(pasteStartPos);
+    var endCoords = editorView.coordsAtPos(pasteEndPos);
     var targetRect = targetElement.getBoundingClientRect();
 
     // The Popup places the menu at the target's bottom edge by default.
-    // We need to shift it up so it aligns with the paste start position.
+    // We shift it up so it aligns with the paste start position.
     // Both coordinates are in viewport space, so the delta is offset-parent agnostic.
     var topDelta = startCoords.top - (targetRect.top + targetRect.height);
+    var adjustedTop = ((_position$top = position.top) !== null && _position$top !== void 0 ? _position$top : 0) + topDelta;
+
+    // Sticky-top: clamp to the scroll container's top edge when the paste
+    // start has scrolled above the visible area, but only while some pasted
+    // content is still visible.
+    if (scrollableElement) {
+      var scrollContainerTop = scrollableElement.getBoundingClientRect().top;
+      if (startCoords.top < scrollContainerTop && endCoords.bottom > scrollContainerTop) {
+        adjustedTop += scrollContainerTop - startCoords.top + PASTE_MENU_GAP_TOP;
+      }
+    }
     return _objectSpread(_objectSpread({}, position), {}, {
-      top: ((_position$top = position.top) !== null && _position$top !== void 0 ? _position$top : 0) + topDelta
+      top: adjustedTop
     });
   };
 }
@@ -92,15 +110,17 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
     showToolbar(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
   }, [lastContentPasted, editorView]);
   var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], function (states) {
-      var _pluginState$showTool, _pluginState$pasteSta;
+      var _pluginState$showTool, _pluginState$pasteSta, _pluginState$pasteEnd;
       var pluginState = states.pasteOptionsToolbarPluginState;
       return {
         showToolbar: (_pluginState$showTool = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showToolbar) !== null && _pluginState$showTool !== void 0 ? _pluginState$showTool : false,
-        pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0
+        pasteStartPos: (_pluginState$pasteSta = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteStartPos) !== null && _pluginState$pasteSta !== void 0 ? _pluginState$pasteSta : 0,
+        pasteEndPos: (_pluginState$pasteEnd = pluginState === null || pluginState === void 0 ? void 0 : pluginState.pasteEndPos) !== null && _pluginState$pasteEnd !== void 0 ? _pluginState$pasteEnd : 0
       };
     }),
     isToolbarShown = _useSharedPluginState2.showToolbar,
-    pasteStartPos = _useSharedPluginState2.pasteStartPos;
+    pasteStartPos = _useSharedPluginState2.pasteStartPos,
+    pasteEndPos = _useSharedPluginState2.pasteEndPos;
   var aiSurfaceComponents = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents('ai-paste-menu')) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var visibleAiActionKeys = getVisibleKeys(aiSurfaceComponents, ['button', 'menu-item']);
   useEffect(function () {
@@ -140,6 +160,15 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
       handleDismiss();
     }
   }, [handleDismiss]);
+
+  // Find the actual scroll container using the same utility the Popup's
+  // stick prop uses internally. We pass this as the scrollableElement prop
+  // so the Popup attaches its built-in scroll listener, which calls
+  // scheduledUpdatePosition (RAF-throttled) on each scroll event — triggering
+  // onPositionCalculated with fresh viewport coordinates.
+  var targetForScroll = isToolbarShown ? getTargetElement(editorView, pasteStartPos) : null;
+  var overflowScrollParent = targetForScroll ? findOverflowScrollParent(targetForScroll) : false;
+  var effectiveScrollableElement = overflowScrollParent || scrollableElement;
   var pasteMenuComponents = (_api$uiControlRegistr3 = api === null || api === void 0 || (_api$uiControlRegistr4 = api.uiControlRegistry) === null || _api$uiControlRegistr4 === void 0 ? void 0 : _api$uiControlRegistr4.actions.getComponents(PASTE_MENU.key)) !== null && _api$uiControlRegistr3 !== void 0 ? _api$uiControlRegistr3 : [];
   var anyComponentVisible = hasVisibleButton(pasteMenuComponents);
   if (!isToolbarShown) {
@@ -156,12 +185,13 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
     target: target,
     mountTo: mountTo,
     boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
+    scrollableElement: effectiveScrollableElement,
+    minPopupMargin: PASTE_MENU_GAP_HORIZONTAL,
     zIndex: akEditorFloatingPanelZIndex,
     alignX: "end",
     alignY: "bottom",
-    offset: [PASTE_MENU_GAP, 0],
-    onPositionCalculated: onPositionCalculated(editorView, pasteStartPos, target),
+    offset: [PASTE_MENU_GAP_HORIZONTAL, 0],
+    onPositionCalculated: onPositionCalculated(editorView, pasteStartPos, pasteEndPos, target, effectiveScrollableElement),
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: handleDismiss
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {

package/dist/types/pm-plugins/constants.d.ts

@@ -6,4 +6,5 @@ export declare const PASTE_TOOLBAR_ITEM_CLASS = "ak-editor-paste-toolbar-item";
 export declare const EDITOR_WRAPPER_CLASS = "akEditor";
 export declare const PASTE_OPTIONS_TEST_ID = "paste-options-testid";
 export declare const PASTE_OPTIONS_META_ID = "paste-options$";
-export declare const PASTE_MENU_GAP = 12;
+export declare const PASTE_MENU_GAP_HORIZONTAL = 8;
+export declare const PASTE_MENU_GAP_TOP = 24;

package/dist/types/ui/on-paste-actions-menu/PasteActionsMenu.d.ts

@@ -11,15 +11,21 @@ interface PasteActionsMenuProps {
 }
 /**
  * Adjusts the vertical position of the paste menu to align with the top of the
- * pasted content using the exact coordinates at the paste start position.
+ * pasted content using the exact coordinates at the paste start position,
+ * and sticks the menu to the top of the scroll container when the pasted
+ * content scrolls above the visible area.
  *
- * The Popup's vertical placement may place the popup below the target element
- * (alignY="bottom"). This override computes the correct top position using
- * coordsAtPos for the paste start, then converts to the Popup's coordinate
- * system by calculating the delta from the target element's bottom (where the
- * Popup positions by default) to the paste start coordinates.
+ * The Popup uses alignY="bottom", which positions the popup below the target
+ * element's bottom edge. This override:
+ *
+ * 1. Shifts the popup from the target's bottom edge to align with the paste
+ *    start position.
+ * 2. When the paste start scrolls above the scroll container, clamps the menu
+ *    to the scroll container's top edge (sticky-top).
+ * 3. Stops sticking once the entire pasted range (pasteEndPos) has scrolled
+ *    above the visible area.
  */
-export declare function onPositionCalculated(editorView: EditorView, pasteStartPos: number, targetElement: HTMLElement): (position: {
+export declare function onPositionCalculated(editorView: EditorView, pasteStartPos: number, pasteEndPos: number, targetElement: HTMLElement, scrollableElement?: HTMLElement | false): (position: {
     bottom?: number;
     left?: number;
     right?: number;

package/dist/types-ts4.5/pm-plugins/constants.d.ts

@@ -6,4 +6,5 @@ export declare const PASTE_TOOLBAR_ITEM_CLASS = "ak-editor-paste-toolbar-item";
 export declare const EDITOR_WRAPPER_CLASS = "akEditor";
 export declare const PASTE_OPTIONS_TEST_ID = "paste-options-testid";
 export declare const PASTE_OPTIONS_META_ID = "paste-options$";
-export declare const PASTE_MENU_GAP = 12;
+export declare const PASTE_MENU_GAP_HORIZONTAL = 8;
+export declare const PASTE_MENU_GAP_TOP = 24;

package/dist/types-ts4.5/ui/on-paste-actions-menu/PasteActionsMenu.d.ts

@@ -11,15 +11,21 @@ interface PasteActionsMenuProps {
 }
 /**
  * Adjusts the vertical position of the paste menu to align with the top of the
- * pasted content using the exact coordinates at the paste start position.
+ * pasted content using the exact coordinates at the paste start position,
+ * and sticks the menu to the top of the scroll container when the pasted
+ * content scrolls above the visible area.
  *
- * The Popup's vertical placement may place the popup below the target element
- * (alignY="bottom"). This override computes the correct top position using
- * coordsAtPos for the paste start, then converts to the Popup's coordinate
- * system by calculating the delta from the target element's bottom (where the
- * Popup positions by default) to the paste start coordinates.
+ * The Popup uses alignY="bottom", which positions the popup below the target
+ * element's bottom edge. This override:
+ *
+ * 1. Shifts the popup from the target's bottom edge to align with the paste
+ *    start position.
+ * 2. When the paste start scrolls above the scroll container, clamps the menu
+ *    to the scroll container's top edge (sticky-top).
+ * 3. Stops sticking once the entire pasted range (pasteEndPos) has scrolled
+ *    above the visible area.
  */
-export declare function onPositionCalculated(editorView: EditorView, pasteStartPos: number, targetElement: HTMLElement): (position: {
+export declare function onPositionCalculated(editorView: EditorView, pasteStartPos: number, pasteEndPos: number, targetElement: HTMLElement, scrollableElement?: HTMLElement | false): (position: {
     bottom?: number;
     left?: number;
     right?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-paste-options-toolbar",
-	"version": "9.0.4",
+	"version": "9.0.6",
 	"description": "Paste options toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,10 +38,10 @@
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-toolbar": "^0.19.0",
 		"@atlaskit/editor-ui-control-model": "^1.1.0",
-		"@atlaskit/icon": "^32.0.0",
+		"@atlaskit/icon": "^32.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^37.0.0",
+		"@atlaskit/tmp-editor-statsig": "^38.1.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -49,7 +49,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.2.0",
+		"@atlaskit/editor-common": "^112.3.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},