luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(inline-menu): container position

Browse Source
This commit is contained in:
austaras
2022-07-27 19:02:24 +08:00
parent 79b1547721
commit 6df271f003
2 changed files with 25 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
View File

@@ -1,28 +1,18 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import style9 from 'style9';
import { import {
MuiClickAwayListener as ClickAwayListener, MuiClickAwayListener as ClickAwayListener,
MuiGrow as Grow, MuiGrow as Grow,
styled,
} from '@toeverything/components/ui'; } from '@toeverything/components/ui';
import { import { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
Virgo,
PluginHooks,
SelectionInfo,
} from '@toeverything/framework/virgo';
import { InlineMenuToolbar } from './Toolbar'; import { InlineMenuToolbar } from './Toolbar';
export type InlineMenuContainerProps = { export type InlineMenuContainerProps = {
style?: { left: number; top: number };
editor: Virgo; editor: Virgo;
hooks: PluginHooks;
}; };
export const InlineMenuContainer = ({ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
editor,
style,
hooks,
}: InlineMenuContainerProps) => {
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
const [containerStyle, setContainerStyle] = useState<{ const [containerStyle, setContainerStyle] = useState<{
left: number; left: number;
@@ -47,11 +37,15 @@ export const InlineMenuContainer = ({
return; return;
} }
// This is relative to window
const rect = browserSelection.getRangeAt(0).getBoundingClientRect(); const rect = browserSelection.getRangeAt(0).getBoundingClientRect();
setSelectionInfo(info); setSelectionInfo(info);
setShowMenu(true); 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; return unsubscribe;
}, [editor]); }, [editor]);
@@ -73,9 +67,8 @@ export const InlineMenuContainer = ({
style={{ transformOrigin: '0 0 0' }} style={{ transformOrigin: '0 0 0' }}
{...{ timeout: 'auto' }} {...{ timeout: 'auto' }}
> >
<div <ToolbarContainer
style={containerStyle} style={containerStyle}
className={styles('toolbarContainer')}
onMouseDown={e => { onMouseDown={e => {
// prevent toolbar from taking focus away from editor // prevent toolbar from taking focus away from editor
e.preventDefault(); e.preventDefault();
@@ -87,21 +80,19 @@ export const InlineMenuContainer = ({
selectionInfo={selectionInfo} selectionInfo={selectionInfo}
setShow={setShowMenu} setShow={setShowMenu}
/> />
</div> </ToolbarContainer>
</Grow> </Grow>
</ClickAwayListener> </ClickAwayListener>
) : null; ) : null;
}; };
const styles = style9.create({ const ToolbarContainer = styled('div')({
toolbarContainer: { position: 'absolute',
position: 'fixed', zIndex: 1,
zIndex: 1, display: 'flex',
display: 'flex', alignItems: 'center',
alignItems: 'center', padding: '0 12px',
padding: '0 12px', borderRadius: '10px',
borderRadius: '10px', boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', backgroundColor: '#fff',
backgroundColor: '#fff',
},
}); });

12
libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx
View File

@@ -10,28 +10,28 @@ export class InlineMenuPlugin extends BasePlugin {
return PLUGIN_NAME; return PLUGIN_NAME;
} }
private root: PluginRenderRoot; private _root: PluginRenderRoot;
protected override _onRender(): void { protected override _onRender(): void {
this.root = new PluginRenderRoot({ this._root = new PluginRenderRoot({
name: InlineMenuPlugin.pluginName, name: InlineMenuPlugin.pluginName,
render: this.editor.reactRenderRoot?.render, render: this.editor.reactRenderRoot?.render,
}); });
this.root.mount(); this._root.mount();
this._renderInlineMenu(); this._renderInlineMenu();
} }
private _renderInlineMenu(): void { private _renderInlineMenu(): void {
this.root?.render( this._root?.render(
<StrictMode> <StrictMode>
<InlineMenuContainer editor={this.editor} hooks={this.hooks} /> <InlineMenuContainer editor={this.editor} />
</StrictMode> </StrictMode>
); );
} }
public override dispose() { public override dispose() {
this.root?.unmount(); this._root?.unmount();
super.dispose(); super.dispose();
} }
} }