luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 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
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 }) => { const RootContainer = styled('div')(({ theme }) => {
return { return {
position: 'fixed', position: 'absolute',
zIndex: 1, zIndex: 1,
width: 352, width: 352,
maxHeight: 525, maxHeight: 525,

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

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