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' }} > -
{ // prevent toolbar from taking focus away from editor e.preventDefault(); @@ -87,21 +80,19 @@ export const InlineMenuContainer = ({ selectionInfo={selectionInfo} setShow={setShowMenu} /> -
+ ) : null; }; -const styles = style9.create({ - toolbarContainer: { - position: 'fixed', - zIndex: 1, - display: 'flex', - alignItems: 'center', - padding: '0 12px', - borderRadius: '10px', - boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', - backgroundColor: '#fff', - }, +const ToolbarContainer = styled('div')({ + position: 'absolute', + zIndex: 1, + display: 'flex', + alignItems: 'center', + padding: '0 12px', + borderRadius: '10px', + boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', + backgroundColor: '#fff', }); diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx index 1c47ca9646..cc834ad14c 100644 --- a/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx +++ b/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx @@ -10,28 +10,28 @@ export class InlineMenuPlugin extends BasePlugin { return PLUGIN_NAME; } - private root: PluginRenderRoot; + private _root: PluginRenderRoot; protected override _onRender(): void { - this.root = new PluginRenderRoot({ + this._root = new PluginRenderRoot({ name: InlineMenuPlugin.pluginName, render: this.editor.reactRenderRoot?.render, }); - this.root.mount(); + this._root.mount(); this._renderInlineMenu(); } private _renderInlineMenu(): void { - this.root?.render( + this._root?.render( - + ); } public override dispose() { - this.root?.unmount(); + this._root?.unmount(); super.dispose(); } }