mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 14:42:03 +03:00
fix(inline-menu): container position
This commit is contained in:
parent
79b1547721
commit
6df271f003
@ -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' }}
|
||||
>
|
||||
<div
|
||||
<ToolbarContainer
|
||||
style={containerStyle}
|
||||
className={styles('toolbarContainer')}
|
||||
onMouseDown={e => {
|
||||
// prevent toolbar from taking focus away from editor
|
||||
e.preventDefault();
|
||||
@ -87,21 +80,19 @@ export const InlineMenuContainer = ({
|
||||
selectionInfo={selectionInfo}
|
||||
setShow={setShowMenu}
|
||||
/>
|
||||
</div>
|
||||
</ToolbarContainer>
|
||||
</Grow>
|
||||
</ClickAwayListener>
|
||||
) : 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',
|
||||
});
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user