diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx index f8cce31df9..bd0484179a 100644 --- a/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx +++ b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx @@ -1,28 +1,18 @@ import { useState, useEffect } from 'react'; -import style9 from 'style9'; import { MuiClickAwayListener as ClickAwayListener, MuiGrow as Grow, + styled, } from '@toeverything/components/ui'; -import { - Virgo, - PluginHooks, - SelectionInfo, -} from '@toeverything/framework/virgo'; +import { Virgo, SelectionInfo } from '@toeverything/framework/virgo'; import { InlineMenuToolbar } from './Toolbar'; export type InlineMenuContainerProps = { - style?: { left: number; top: number }; editor: Virgo; - hooks: PluginHooks; }; -export const InlineMenuContainer = ({ - editor, - style, - hooks, -}: InlineMenuContainerProps) => { +export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => { const [showMenu, setShowMenu] = useState(false); const [containerStyle, setContainerStyle] = useState<{ left: number; @@ -47,11 +37,15 @@ export const InlineMenuContainer = ({ return; } + // This is relative to window const rect = browserSelection.getRangeAt(0).getBoundingClientRect(); setSelectionInfo(info); setShowMenu(true); - setContainerStyle({ left: rect.left, top: rect.top - 64 }); + setContainerStyle({ + left: rect.left - editor.container.getBoundingClientRect().left, + top: anchorNode.dom.offsetTop - 64, + }); }); return unsubscribe; }, [editor]); @@ -73,9 +67,8 @@ export const InlineMenuContainer = ({ style={{ transformOrigin: '0 0 0' }} {...{ timeout: 'auto' }} > -