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
@@ -3,24 +3,28 @@ import { createRoot, type Root } from 'react-dom/client';
import { BasePlugin } from '../../base-plugin'; import { BasePlugin } from '../../base-plugin';
import { CommandMenu } from './Menu'; import { CommandMenu } from './Menu';
import { PluginRenderRoot } from '../../utils';
const PLUGIN_NAME = 'command-menu'; const PLUGIN_NAME = 'command-menu';
export class CommandMenuPlugin extends BasePlugin { export class CommandMenuPlugin extends BasePlugin {
private root?: Root; private root?: PluginRenderRoot;
public static override get pluginName(): string { public static override get pluginName(): string {
return PLUGIN_NAME; return PLUGIN_NAME;
} }
protected override on_render(): void { protected override on_render(): void {
if (this.editor.isWhiteboard) return;
const container = document.createElement('div'); const container = document.createElement('div');
// TODO remove // TODO remove
container.classList.add(`id-${PLUGIN_NAME}`); container.classList.add(`id-${PLUGIN_NAME}`);
// this.editor.attachElement(this.menu_container); this.root = new PluginRenderRoot({
window.document.body.appendChild(container); name: PLUGIN_NAME,
this.root = createRoot(container); render: this.editor.reactRenderRoot.render,
this.render_command_menu(); });
this.root.mount();
this.renderCommandMenu();
} }
private renderCommandMenu(): void { private renderCommandMenu(): void {
@@ -10,7 +10,6 @@ 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';
import { Point } from '@toeverything/utils';
import { CommandMenuContainer } from './Container'; import { CommandMenuContainer } from './Container';
import { import {
@@ -237,21 +236,24 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
ref={commandMenuContentRef} ref={commandMenuContentRef}
> >
<MuiClickAwayListener onClickAway={handle_click_away}> <MuiClickAwayListener onClickAway={handle_click_away}>
<CommandMenuContainer {/* MuiClickAwayListener 渲染子节点问题*/}
editor={editor} <div>
hooks={hooks} <CommandMenuContainer
style={{ editor={editor}
...commandMenuPosition, hooks={hooks}
...style, style={{
}} ...commandMenuPosition,
isShow={is_show} ...style,
blockId={block_id} }}
onSelected={handle_selected} isShow={is_show}
onclose={handle_close} blockId={block_id}
searchBlocks={search_blocks} onSelected={handle_selected}
types={types} onclose={handle_close}
categories={categories} searchBlocks={search_blocks}
/> types={types}
categories={categories}
/>
</div>
</MuiClickAwayListener> </MuiClickAwayListener>
</div> </div>
); );