@atlaskit/editor-plugin-paste-options-toolbar 9.1.3 → 9.1.5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-paste-options-toolbar
 
+## 9.1.5
+
+### Patch Changes
+
+- [`2e030e319c013`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e030e319c013) -
+  [EDITOR-5982] Fix AI paste menu not appearing when pasting heading + text
+- [`e7032ec0e9287`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e7032ec0e9287) -
+  [ux] EDITOR-5983 Ensure paste menu is in correct position when first pasted node is empty
+
+## 9.1.4
+
+### Patch Changes
+
+- [`cdacbdec78ed6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cdacbdec78ed6) -
+  [EDITOR-5980] Fix sticky menu stopping before table when paste selection ends inside cell
+- [`70e3625a8ae3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/70e3625a8ae3f) -
+  [EDITOR-5880] updated prop name for consistency and used view.dom for stable editor reference
+- Updated dependencies
+
 ## 9.1.3
 
 ### Patch Changes

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PasteActionsMenu = void 0;
+exports.getTargetElement = getTargetElement;
+exports.getVisualEndBottom = getVisualEndBottom;
 exports.onPositionCalculated = onPositionCalculated;
+exports.resolveTableAfterPos = resolveTableAfterPos;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -27,10 +30,21 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
+/**
+ * Returns the DOM element at the given document position for use as a Popup anchor.
+ * For empty blocks (BR elements), returns the parent element to ensure correct positioning.
+ */
 function getTargetElement(editorView, pos) {
   try {
     var domRef = (0, _utils.findDomRefAtPos)(pos, editorView.domAtPos.bind(editorView));
     if (domRef instanceof HTMLElement) {
+      // Empty blocks render a <br> placeholder whose bounding rect has no
+      // meaningful dimensions (height ≈ 0). Using it as the Popup anchor
+      // causes the menu to appear at an unexpected position. Walk up to the
+      // parent block element so the Popup anchors correctly.
+      if (domRef.nodeName === 'BR' && domRef.parentElement) {
+        return domRef.parentElement;
+      }
       return domRef;
     }
     return null;
@@ -39,6 +53,34 @@ function getTargetElement(editorView, pos) {
   }
 }
 
+/**
+ * Returns the position immediately after a table ancestor of `pos`, or
+ * `undefined` if not inside a table. Safe to cache per document version.
+ */
+function resolveTableAfterPos(editorView, pos) {
+  var $pos = editorView.state.doc.resolve(pos);
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    if ($pos.node(depth).type.name === 'table') {
+      return $pos.after(depth);
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Returns the visual bottom of the pasted content. For positions inside a
+ * table, uses the pre-computed `tableAfterPos` to get the correct bottom edge.
+ */
+function getVisualEndBottom(editorView, pasteEndPos, tableAfterPos) {
+  var endCoords = editorView.coordsAtPos(pasteEndPos);
+  var bottom = endCoords.bottom;
+  if (tableAfterPos !== undefined) {
+    var afterCoords = editorView.coordsAtPos(tableAfterPos);
+    bottom = Math.max(bottom, afterCoords.bottom);
+  }
+  return bottom;
+}
+
 /**
  * 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,
@@ -56,10 +98,12 @@ function getTargetElement(editorView, pos) {
  *    above the visible area.
  */
 function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, targetElement, scrollableElement) {
+  // Pre-compute once per render to avoid doc.resolve() on every scroll frame.
+  var tableAfterPos = resolveTableAfterPos(editorView, pasteEndPos);
   return function (position) {
     var _position$top;
     var startCoords = editorView.coordsAtPos(pasteStartPos);
-    var endCoords = editorView.coordsAtPos(pasteEndPos);
+    var endBottom = getVisualEndBottom(editorView, pasteEndPos, tableAfterPos);
     var targetRect = targetElement.getBoundingClientRect();
 
     // The Popup places the menu at the target's bottom edge by default.
@@ -73,7 +117,7 @@ function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, targetElem
     // content is still visible.
     if (scrollableElement) {
       var scrollContainerTop = scrollableElement.getBoundingClientRect().top;
-      if (startCoords.top < scrollContainerTop && endCoords.bottom > scrollContainerTop) {
+      if (startCoords.top < scrollContainerTop && endBottom > scrollContainerTop) {
         adjustedTop += scrollContainerTop - startCoords.top + _constants.PASTE_MENU_GAP_TOP;
       }
     }
@@ -115,7 +159,12 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
     var $pos = editorView.state.doc.resolve(lastContentPasted.pasteStartPos);
     var pasteAncestorNodeNames = [];
     for (var depth = $pos.depth; depth > 0; depth--) {
-      pasteAncestorNodeNames.push($pos.node(depth).type.name);
+      // Only include an ancestor if the entire pasted range is contained within it.
+      // This prevents nodes like 'heading' from being flagged as ancestors when the
+      // pasted content starts in a heading but extends beyond it (e.g. heading + paragraph).
+      if (lastContentPasted.pasteEndPos <= $pos.end(depth)) {
+        pasteAncestorNodeNames.push($pos.node(depth).type.name);
+      }
     }
     var legacyVisible = (0, _toolbar2.isToolbarVisible)(editorView.state, lastContentPasted) && ((_lastContentPasted$te = (_lastContentPasted$te2 = lastContentPasted.text) === null || _lastContentPasted$te2 === void 0 ? void 0 : _lastContentPasted$te2.length) !== null && _lastContentPasted$te !== void 0 ? _lastContentPasted$te : 0) >= 100;
     (0, _commands.showToolbar)(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
@@ -177,8 +226,7 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
   // 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 overflowScrollParent = isToolbarShown ? (0, _ui.findOverflowScrollParent)(editorView.dom) : 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);

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

@@ -14,10 +14,21 @@ import { isToolbarVisible } from '../toolbar';
 import { getVisibleKeys, hasVisibleButton } from './hasVisibleButton';
 import { PasteActionsMenuContent } from './PasteActionsMenuContent';
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-function getTargetElement(editorView, pos) {
+/**
+ * Returns the DOM element at the given document position for use as a Popup anchor.
+ * For empty blocks (BR elements), returns the parent element to ensure correct positioning.
+ */
+export function getTargetElement(editorView, pos) {
   try {
     const domRef = findDomRefAtPos(pos, editorView.domAtPos.bind(editorView));
     if (domRef instanceof HTMLElement) {
+      // Empty blocks render a <br> placeholder whose bounding rect has no
+      // meaningful dimensions (height ≈ 0). Using it as the Popup anchor
+      // causes the menu to appear at an unexpected position. Walk up to the
+      // parent block element so the Popup anchors correctly.
+      if (domRef.nodeName === 'BR' && domRef.parentElement) {
+        return domRef.parentElement;
+      }
       return domRef;
     }
     return null;
@@ -26,6 +37,34 @@ function getTargetElement(editorView, pos) {
   }
 }
 
+/**
+ * Returns the position immediately after a table ancestor of `pos`, or
+ * `undefined` if not inside a table. Safe to cache per document version.
+ */
+export function resolveTableAfterPos(editorView, pos) {
+  const $pos = editorView.state.doc.resolve(pos);
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    if ($pos.node(depth).type.name === 'table') {
+      return $pos.after(depth);
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Returns the visual bottom of the pasted content. For positions inside a
+ * table, uses the pre-computed `tableAfterPos` to get the correct bottom edge.
+ */
+export function getVisualEndBottom(editorView, pasteEndPos, tableAfterPos) {
+  const endCoords = editorView.coordsAtPos(pasteEndPos);
+  let bottom = endCoords.bottom;
+  if (tableAfterPos !== undefined) {
+    const afterCoords = editorView.coordsAtPos(tableAfterPos);
+    bottom = Math.max(bottom, afterCoords.bottom);
+  }
+  return bottom;
+}
+
 /**
  * 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,
@@ -43,10 +82,12 @@ function getTargetElement(editorView, pos) {
  *    above the visible area.
  */
 export function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, targetElement, scrollableElement) {
+  // Pre-compute once per render to avoid doc.resolve() on every scroll frame.
+  const tableAfterPos = resolveTableAfterPos(editorView, pasteEndPos);
   return position => {
     var _position$top;
     const startCoords = editorView.coordsAtPos(pasteStartPos);
-    const endCoords = editorView.coordsAtPos(pasteEndPos);
+    const endBottom = getVisualEndBottom(editorView, pasteEndPos, tableAfterPos);
     const targetRect = targetElement.getBoundingClientRect();
 
     // The Popup places the menu at the target's bottom edge by default.
@@ -60,7 +101,7 @@ export function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, tar
     // content is still visible.
     if (scrollableElement) {
       const scrollContainerTop = scrollableElement.getBoundingClientRect().top;
-      if (startCoords.top < scrollContainerTop && endCoords.bottom > scrollContainerTop) {
+      if (startCoords.top < scrollContainerTop && endBottom > scrollContainerTop) {
         adjustedTop += scrollContainerTop - startCoords.top + PASTE_MENU_GAP_TOP;
       }
     }
@@ -105,7 +146,12 @@ export const PasteActionsMenu = ({
     const $pos = editorView.state.doc.resolve(lastContentPasted.pasteStartPos);
     const pasteAncestorNodeNames = [];
     for (let depth = $pos.depth; depth > 0; depth--) {
-      pasteAncestorNodeNames.push($pos.node(depth).type.name);
+      // Only include an ancestor if the entire pasted range is contained within it.
+      // This prevents nodes like 'heading' from being flagged as ancestors when the
+      // pasted content starts in a heading but extends beyond it (e.g. heading + paragraph).
+      if (lastContentPasted.pasteEndPos <= $pos.end(depth)) {
+        pasteAncestorNodeNames.push($pos.node(depth).type.name);
+      }
     }
     const legacyVisible = isToolbarVisible(editorView.state, lastContentPasted) && ((_lastContentPasted$te = (_lastContentPasted$te2 = lastContentPasted.text) === null || _lastContentPasted$te2 === void 0 ? void 0 : _lastContentPasted$te2.length) !== null && _lastContentPasted$te !== void 0 ? _lastContentPasted$te : 0) >= 100;
     showToolbar(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
@@ -168,8 +214,7 @@ export const PasteActionsMenu = ({
   // 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 overflowScrollParent = isToolbarShown ? findOverflowScrollParent(editorView.dom) : 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);

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

@@ -17,10 +17,21 @@ import { isToolbarVisible } from '../toolbar';
 import { getVisibleKeys, hasVisibleButton } from './hasVisibleButton';
 import { PasteActionsMenuContent } from './PasteActionsMenuContent';
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-function getTargetElement(editorView, pos) {
+/**
+ * Returns the DOM element at the given document position for use as a Popup anchor.
+ * For empty blocks (BR elements), returns the parent element to ensure correct positioning.
+ */
+export function getTargetElement(editorView, pos) {
   try {
     var domRef = findDomRefAtPos(pos, editorView.domAtPos.bind(editorView));
     if (domRef instanceof HTMLElement) {
+      // Empty blocks render a <br> placeholder whose bounding rect has no
+      // meaningful dimensions (height ≈ 0). Using it as the Popup anchor
+      // causes the menu to appear at an unexpected position. Walk up to the
+      // parent block element so the Popup anchors correctly.
+      if (domRef.nodeName === 'BR' && domRef.parentElement) {
+        return domRef.parentElement;
+      }
       return domRef;
     }
     return null;
@@ -29,6 +40,34 @@ function getTargetElement(editorView, pos) {
   }
 }
 
+/**
+ * Returns the position immediately after a table ancestor of `pos`, or
+ * `undefined` if not inside a table. Safe to cache per document version.
+ */
+export function resolveTableAfterPos(editorView, pos) {
+  var $pos = editorView.state.doc.resolve(pos);
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    if ($pos.node(depth).type.name === 'table') {
+      return $pos.after(depth);
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Returns the visual bottom of the pasted content. For positions inside a
+ * table, uses the pre-computed `tableAfterPos` to get the correct bottom edge.
+ */
+export function getVisualEndBottom(editorView, pasteEndPos, tableAfterPos) {
+  var endCoords = editorView.coordsAtPos(pasteEndPos);
+  var bottom = endCoords.bottom;
+  if (tableAfterPos !== undefined) {
+    var afterCoords = editorView.coordsAtPos(tableAfterPos);
+    bottom = Math.max(bottom, afterCoords.bottom);
+  }
+  return bottom;
+}
+
 /**
  * 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,
@@ -46,10 +85,12 @@ function getTargetElement(editorView, pos) {
  *    above the visible area.
  */
 export function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, targetElement, scrollableElement) {
+  // Pre-compute once per render to avoid doc.resolve() on every scroll frame.
+  var tableAfterPos = resolveTableAfterPos(editorView, pasteEndPos);
   return function (position) {
     var _position$top;
     var startCoords = editorView.coordsAtPos(pasteStartPos);
-    var endCoords = editorView.coordsAtPos(pasteEndPos);
+    var endBottom = getVisualEndBottom(editorView, pasteEndPos, tableAfterPos);
     var targetRect = targetElement.getBoundingClientRect();
 
     // The Popup places the menu at the target's bottom edge by default.
@@ -63,7 +104,7 @@ export function onPositionCalculated(editorView, pasteStartPos, pasteEndPos, tar
     // content is still visible.
     if (scrollableElement) {
       var scrollContainerTop = scrollableElement.getBoundingClientRect().top;
-      if (startCoords.top < scrollContainerTop && endCoords.bottom > scrollContainerTop) {
+      if (startCoords.top < scrollContainerTop && endBottom > scrollContainerTop) {
         adjustedTop += scrollContainerTop - startCoords.top + PASTE_MENU_GAP_TOP;
       }
     }
@@ -105,7 +146,12 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
     var $pos = editorView.state.doc.resolve(lastContentPasted.pasteStartPos);
     var pasteAncestorNodeNames = [];
     for (var depth = $pos.depth; depth > 0; depth--) {
-      pasteAncestorNodeNames.push($pos.node(depth).type.name);
+      // Only include an ancestor if the entire pasted range is contained within it.
+      // This prevents nodes like 'heading' from being flagged as ancestors when the
+      // pasted content starts in a heading but extends beyond it (e.g. heading + paragraph).
+      if (lastContentPasted.pasteEndPos <= $pos.end(depth)) {
+        pasteAncestorNodeNames.push($pos.node(depth).type.name);
+      }
     }
     var legacyVisible = isToolbarVisible(editorView.state, lastContentPasted) && ((_lastContentPasted$te = (_lastContentPasted$te2 = lastContentPasted.text) === null || _lastContentPasted$te2 === void 0 ? void 0 : _lastContentPasted$te2.length) !== null && _lastContentPasted$te !== void 0 ? _lastContentPasted$te : 0) >= 100;
     showToolbar(lastContentPasted, selectedOption, legacyVisible, pasteAncestorNodeNames)(editorView.state, editorView.dispatch);
@@ -167,8 +213,7 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
   // 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 overflowScrollParent = isToolbarShown ? findOverflowScrollParent(editorView.dom) : 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);

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

@@ -9,6 +9,21 @@ interface PasteActionsMenuProps {
     mountTo?: HTMLElement;
     scrollableElement?: HTMLElement;
 }
+/**
+ * Returns the DOM element at the given document position for use as a Popup anchor.
+ * For empty blocks (BR elements), returns the parent element to ensure correct positioning.
+ */
+export declare function getTargetElement(editorView: EditorView, pos: number): HTMLElement | null;
+/**
+ * Returns the position immediately after a table ancestor of `pos`, or
+ * `undefined` if not inside a table. Safe to cache per document version.
+ */
+export declare function resolveTableAfterPos(editorView: EditorView, pos: number): number | undefined;
+/**
+ * Returns the visual bottom of the pasted content. For positions inside a
+ * table, uses the pre-computed `tableAfterPos` to get the correct bottom edge.
+ */
+export declare function getVisualEndBottom(editorView: EditorView, pasteEndPos: number, tableAfterPos?: number): number;
 /**
  * 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,

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

@@ -9,6 +9,21 @@ interface PasteActionsMenuProps {
     mountTo?: HTMLElement;
     scrollableElement?: HTMLElement;
 }
+/**
+ * Returns the DOM element at the given document position for use as a Popup anchor.
+ * For empty blocks (BR elements), returns the parent element to ensure correct positioning.
+ */
+export declare function getTargetElement(editorView: EditorView, pos: number): HTMLElement | null;
+/**
+ * Returns the position immediately after a table ancestor of `pos`, or
+ * `undefined` if not inside a table. Safe to cache per document version.
+ */
+export declare function resolveTableAfterPos(editorView: EditorView, pos: number): number | undefined;
+/**
+ * Returns the visual bottom of the pasted content. For positions inside a
+ * table, uses the pre-computed `tableAfterPos` to get the correct bottom edge.
+ */
+export declare function getVisualEndBottom(editorView: EditorView, pasteEndPos: number, tableAfterPos?: number): number;
 /**
  * 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,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-paste-options-toolbar",
-	"version": "9.1.3",
+	"version": "9.1.5",
 	"description": "Paste options toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,7 +48,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.5.0",
+		"@atlaskit/editor-common": "^112.6.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},