fix: slash menu cannot disappear

This commit is contained in:
DiamondThree
2022-07-27 18:16:36 +08:00
parent 6f8ad3fa77
commit 9cc55d7f63
2 changed files with 27 additions and 21 deletions

View File

@@ -3,24 +3,28 @@ import { createRoot, type Root } from 'react-dom/client';
import { BasePlugin } from '../../base-plugin';
import { CommandMenu } from './Menu';
import { PluginRenderRoot } from '../../utils';
const PLUGIN_NAME = 'command-menu';
export class CommandMenuPlugin extends BasePlugin {
private root?: Root;
private root?: PluginRenderRoot;
public static override get pluginName(): string {
return PLUGIN_NAME;
}
protected override on_render(): void {
if (this.editor.isWhiteboard) return;
const container = document.createElement('div');
// TODO remove
container.classList.add(`id-${PLUGIN_NAME}`);
// this.editor.attachElement(this.menu_container);
window.document.body.appendChild(container);
this.root = createRoot(container);
this.render_command_menu();
this.root = new PluginRenderRoot({
name: PLUGIN_NAME,
render: this.editor.reactRenderRoot.render,
});
this.root.mount();
this.renderCommandMenu();
}
private renderCommandMenu(): void {

View File

@@ -10,7 +10,6 @@ import style9 from 'style9';
import { MuiClickAwayListener } from '@toeverything/components/ui';
import { Virgo, HookType, PluginHooks } from '@toeverything/framework/virgo';
import { Point } from '@toeverything/utils';
import { CommandMenuContainer } from './Container';
import {
@@ -237,21 +236,24 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
ref={commandMenuContentRef}
>
<MuiClickAwayListener onClickAway={handle_click_away}>
<CommandMenuContainer
editor={editor}
hooks={hooks}
style={{
...commandMenuPosition,
...style,
}}
isShow={is_show}
blockId={block_id}
onSelected={handle_selected}
onclose={handle_close}
searchBlocks={search_blocks}
types={types}
categories={categories}
/>
{/* MuiClickAwayListener 渲染子节点问题*/}
<div>
<CommandMenuContainer
editor={editor}
hooks={hooks}
style={{
...commandMenuPosition,
...style,
}}
isShow={is_show}
blockId={block_id}
onSelected={handle_selected}
onclose={handle_close}
searchBlocks={search_blocks}
types={types}
categories={categories}
/>
</div>
</MuiClickAwayListener>
</div>
);