diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 99bb29a1d7..2f86eccf1b 100644
--- 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
index 61d75e1979..5409369966 100644
--- 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(