fix(inline-menu): container position

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 {
+import { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
-    Virgo,
-    PluginHooks,
-    SelectionInfo,
-} from '@toeverything/framework/virgo';
 import { InlineMenuToolbar } from './Toolbar';
 
 export type InlineMenuContainerProps = {
-    style?: { left: number; top: number };
     editor: Virgo;
-    hooks: PluginHooks;
 };
 
-export const InlineMenuContainer = ({
+export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
-    editor,
-    style,
-    hooks,
-}: 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' }}
             >
-                <div
+                <ToolbarContainer
                     style={containerStyle}
-                    className={styles('toolbarContainer')}
                     onMouseDown={e => {
                         // prevent toolbar from taking focus away from editor
                         e.preventDefault();
@@ -87,15 +80,14 @@ export const InlineMenuContainer = ({
                         selectionInfo={selectionInfo}
                         setShow={setShowMenu}
                     />
-                </div>
+                </ToolbarContainer>
             </Grow>
         </ClickAwayListener>
     ) : null;
 };
 
-const styles = style9.create({
+const ToolbarContainer = styled('div')({
-    toolbarContainer: {
+    position: 'absolute',
-        position: 'fixed',
     zIndex: 1,
     display: 'flex',
     alignItems: 'center',
@@ -103,5 +95,4 @@ const styles = style9.create({
     borderRadius: '10px',
     boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
     backgroundColor: '#fff',
-    },
 });

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(
             <StrictMode>
-                <InlineMenuContainer editor={this.editor} hooks={this.hooks} />
+                <InlineMenuContainer editor={this.editor} />
             </StrictMode>
         );
     }
 
     public override dispose() {
-        this.root?.unmount();
+        this._root?.unmount();
         super.dispose();
     }
 }