@atlaskit/editor-plugin-paste-options-toolbar 9.1.2 → 9.1.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-paste-options-toolbar
 
+## 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
+
+- [`0fe3de6aa5e9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fe3de6aa5e9c) -
+  [ux] EDITOR-5978 Add additional buttons and update thresholds for Editor AI paste actions. Only
+  show existing paste actions if pasting greater than 100 characters.
+
 ## 9.1.2
 
 ### Patch Changes

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

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PasteActionsMenu = void 0;
+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");
@@ -39,6 +41,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 +86,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 +105,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;
       }
     }
@@ -99,6 +131,7 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
     lastContentPasted = _useSharedPluginState.lastContentPasted;
   var prevShowToolbarRef = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
+    var _lastContentPasted$te, _lastContentPasted$te2;
     if (!lastContentPasted) {
       (0, _commands.hideToolbar)()(editorView.state, editorView.dispatch);
       return;
@@ -116,7 +149,7 @@ var PasteActionsMenu = exports.PasteActionsMenu = function PasteActionsMenu(_ref
     for (var depth = $pos.depth; depth > 0; depth--) {
       pasteAncestorNodeNames.push($pos.node(depth).type.name);
     }
-    var legacyVisible = (0, _toolbar2.isToolbarVisible)(editorView.state, lastContentPasted);
+    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);
   }, [lastContentPasted, editorView]);
   var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['pasteOptionsToolbarPlugin'], function (states) {
@@ -176,8 +209,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

@@ -26,6 +26,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 +71,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 +90,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;
       }
     }
@@ -89,6 +119,7 @@ export const PasteActionsMenu = ({
   });
   const prevShowToolbarRef = useRef(false);
   useEffect(() => {
+    var _lastContentPasted$te, _lastContentPasted$te2;
     if (!lastContentPasted) {
       hideToolbar()(editorView.state, editorView.dispatch);
       return;
@@ -106,7 +137,7 @@ export const PasteActionsMenu = ({
     for (let depth = $pos.depth; depth > 0; depth--) {
       pasteAncestorNodeNames.push($pos.node(depth).type.name);
     }
-    const legacyVisible = isToolbarVisible(editorView.state, lastContentPasted);
+    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);
   }, [lastContentPasted, editorView]);
   const {
@@ -167,8 +198,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

@@ -29,6 +29,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 +74,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 +93,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;
       }
     }
@@ -89,6 +119,7 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
     lastContentPasted = _useSharedPluginState.lastContentPasted;
   var prevShowToolbarRef = useRef(false);
   useEffect(function () {
+    var _lastContentPasted$te, _lastContentPasted$te2;
     if (!lastContentPasted) {
       hideToolbar()(editorView.state, editorView.dispatch);
       return;
@@ -106,7 +137,7 @@ export var PasteActionsMenu = function PasteActionsMenu(_ref) {
     for (var depth = $pos.depth; depth > 0; depth--) {
       pasteAncestorNodeNames.push($pos.node(depth).type.name);
     }
-    var legacyVisible = isToolbarVisible(editorView.state, lastContentPasted);
+    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);
   }, [lastContentPasted, editorView]);
   var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['pasteOptionsToolbarPlugin'], function (states) {
@@ -166,8 +197,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,16 @@ interface PasteActionsMenuProps {
     mountTo?: HTMLElement;
     scrollableElement?: HTMLElement;
 }
+/**
+ * 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,16 @@ interface PasteActionsMenuProps {
     mountTo?: HTMLElement;
     scrollableElement?: HTMLElement;
 }
+/**
+ * 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.2",
+	"version": "9.1.4",
 	"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.4.0",
+		"@atlaskit/editor-common": "^112.5.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},