toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 21:02:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: commond menu in whitebord

Browse Source
This commit is contained in:
DiamondThree 2022-07-28 23:10:30 +08:00
parent 7407349561
commit d99649a9b6
2 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/editor-plugins/src/menu/command-menu/Container.tsx
View File

@ -26,7 +26,7 @@ import {
const RootContainer = styled('div')(({ theme }) => {
return {
position: 'fixed',
position: 'absolute',
zIndex: 1,
width: 352,
maxHeight: 525,

30
libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
View File

@ -6,7 +6,6 @@ import React, {
useRef,
useState,
} from 'react';
import style9 from 'style9';
import { MuiClickAwayListener } from '@toeverything/components/ui';
import { Virgo, HookType, PluginHooks } from '@toeverything/framework/virgo';
@ -31,8 +30,6 @@ type CommandMenuPosition = {
bottom: number | 'initial';
};
const COMMAND_MENU_HEIGHT = 509;
export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
const [show, setShow] = useState(false);
const [blockId, setBlockId] = useState<string>();
@ -111,22 +108,24 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
?.getRangeAt(0)
?.getBoundingClientRect();
if (rect) {
let top = rect.top;
let rectTop = rect.top;
const clientHeight =
document.documentElement.clientHeight;
if (clientHeight - top <= COMMAND_MENU_HEIGHT) {
top = clientHeight - top + 10;
const COMMAND_MENU_HEIGHT =
window.innerHeight * 0.4;
const { top, left } =
editor.container.getBoundingClientRect();
if (clientHeight - rectTop <= COMMAND_MENU_HEIGHT) {
setCommandMenuPosition({
left: rect.left,
bottom: top,
left: rect.left - left,
bottom: rectTop - top + 10,
top: 'initial',
});
} else {
top += 24;
setCommandMenuPosition({
left: rect.left,
top: top,
left: rect.left - left,
top: rectTop - top + 24,
bottom: 'initial',
});
}
@ -234,7 +233,7 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
return (
<div
className={styles('commandMenu')}
style={{ zIndex: 1 }}
onKeyUpCapture={handle_keyup}
ref={commandMenuContentRef}
>
@ -260,10 +259,3 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
</div>
);
};
const styles = style9.create({
commandMenu: {
position: 'absolute',
zIndex: 1,
},
});