Merge pull request #3288 from zhyd1997/fix/floating-toolbar-in-dialog…

…-1718432542507 fix(templates): added `portalElement` in `floating-toolbar` component.
udecode · Jun 17, 2024 · a1942ba · a1942ba
2 parents 125f11d + 16297bc
commit a1942ba
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -22,6 +22,7 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 - update `mention-input-element` and `slash-input-element` to use the new combobox
 - feat `draggable`: add the data-key attribute to facilitate adding selection after the drag-and-drop operation is completed
 - breaking change: Open the caption by using `CaptionButton` or pass the media element's ID through `captionActions.showCaptionId`"
+- add `portalElement` prop to `floating-toolbar`
 
 ## May 2024 #10
 

diff --git a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx
@@ -16,9 +16,10 @@ import { Toolbar } from './toolbar';
 export const FloatingToolbar = withRef<
   typeof Toolbar,
   {
+    portalElement?: Element
     state?: FloatingToolbarState;
   }
->(({ state, children, ...props }, componentRef) => {
+>(({ state, portalElement, children, ...props }, componentRef) => {
   const floatingToolbarState = useFloatingToolbarState({
     ...state,
     floatingOptions: {
@@ -50,7 +51,7 @@ export const FloatingToolbar = withRef<
   if (hidden) return null;
 
   return (
-    <PortalBody>
+    <PortalBody element={portalElement}>
       <Toolbar
         ref={ref}
         className={cn(