fix(plugin): make group menu invisible when leave

This commit is contained in:
austaras 2022-07-28 16:24:46 +08:00
parent 6cd8fe6832
commit e150b7c32a
8 changed files with 69 additions and 59 deletions

View File

@ -16,13 +16,11 @@ if (!container) {
}
const root = createRoot(container);
root.render(
<StrictMode>
<BrowserRouter>
<ThemeProvider>
<FeatureFlagsProvider>
<LigoVirgoRoutes />
</FeatureFlagsProvider>
</ThemeProvider>
</BrowserRouter>
</StrictMode>
<BrowserRouter>
<ThemeProvider>
<FeatureFlagsProvider>
<LigoVirgoRoutes />
</FeatureFlagsProvider>
</ThemeProvider>
</BrowserRouter>
);

View File

@ -113,19 +113,19 @@ export const AffineBoardWitchContext = ({
workspace,
rootBlockId,
}: AffineBoardProps) => {
const [editor, set_editor] = useState<BlockEditor>();
const [editor, setEditor] = useState<BlockEditor>();
useEffect(() => {
const inner_editor = createEditor(workspace, true);
set_editor(inner_editor);
const innerEditor = createEditor(workspace, rootBlockId, true);
setEditor(innerEditor);
return () => {
inner_editor.dispose();
innerEditor.dispose();
};
}, [workspace]);
}, [workspace, rootBlockId]);
const [page, set_page] = useState<AsyncBlock>();
const [page, setPage] = useState<AsyncBlock>();
useEffect(() => {
editor?.getBlockById(rootBlockId).then(block => {
set_page(block);
setPage(block);
});
}, [editor, rootBlockId]);
return page ? (

View File

@ -20,46 +20,55 @@ interface AffineEditorProps {
isWhiteboard?: boolean;
}
function useConstant<T>(init: () => T): T {
const ref = useRef<T>(null);
ref.current ??= init();
function _useConstantWithDispose(
workspace: string,
rootBlockId: string,
isWhiteboard: boolean
) {
const ref = useRef<{ data: BlockEditor; onInit: boolean }>(null);
const { setCurrentEditors } = useCurrentEditors();
ref.current ??= {
data: createEditor(workspace, rootBlockId, isWhiteboard),
onInit: true,
};
return ref.current;
useEffect(() => {
if (ref.current.onInit) {
ref.current.onInit = false;
} else {
ref.current.data = createEditor(
workspace,
rootBlockId,
isWhiteboard
);
}
setCurrentEditors(prev => ({
...prev,
[rootBlockId]: ref.current.data,
}));
return () => ref.current.data.dispose();
}, [workspace, rootBlockId, isWhiteboard, setCurrentEditors]);
return ref.current.data;
}
export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
({ workspace, rootBlockId, scrollBlank = true, isWhiteboard }, ref) => {
const { setCurrentEditors } = useCurrentEditors();
const editor = useConstant(() => {
const editor = createEditor(workspace, isWhiteboard);
// @ts-ignore
globalThis.virgo = editor;
return editor;
});
const editor = _useConstantWithDispose(
workspace,
rootBlockId,
isWhiteboard
);
useImperativeHandle(ref, () => editor);
useEffect(() => {
if (rootBlockId) {
editor.setRootBlockId(rootBlockId);
} else {
console.error('rootBlockId for page is required. ');
}
}, [editor, rootBlockId]);
useEffect(() => {
if (!rootBlockId) return;
setCurrentEditors(prev => ({ ...prev, [rootBlockId]: editor }));
}, [editor, rootBlockId, setCurrentEditors]);
return (
<RenderRoot
editor={editor}
editorElement={AffineEditor as any}
scrollBlank={scrollBlank}
>
<RenderBlock blockId={rootBlockId} />
<RenderBlock blockId={editor.getRootBlockId()} />
</RenderRoot>
);
}

View File

@ -27,9 +27,14 @@ import {
import { Protocol } from '@toeverything/datasource/db-service';
import { plugins } from '@toeverything/components/editor-plugins';
export const createEditor = (workspace: string, isWhiteboard?: boolean) => {
export const createEditor = (
workspace: string,
rootBlockId: string,
isWhiteboard?: boolean
) => {
const blockEditor = new BlockEditor({
workspace,
rootBlockId,
views: {
[Protocol.Block.Type.page]: new PageBlock(),
[Protocol.Block.Type.reference]: new RefLinkBlock(),

View File

@ -1,5 +1,5 @@
import { FC, useState } from 'react';
import { useNavigate, useParams } from 'react-router';
import { useNavigate } from 'react-router';
import clsx from 'clsx';
import style9 from 'style9';
@ -17,7 +17,6 @@ import { BlockPreview } from '../block-preview';
import { BackwardUndoIcon } from '@toeverything/components/icons';
export const commonListContainer = 'commonListContainer';
import { useFlag } from '@toeverything/datasource/feature-flags';
type Content = {
id: string;

View File

@ -40,7 +40,7 @@ export interface EditorCtorProps {
workspace: string;
views: Partial<Record<keyof BlockFlavors, BaseView>>;
plugins: PluginCreator[];
rootBlockId?: string;
rootBlockId: string;
isWhiteboard?: boolean;
}
@ -65,7 +65,7 @@ export class Editor implements Virgo {
private views: Record<string, BaseView> = {};
workspace: string;
readonly = false;
private root_block_id: string;
private _rootBlockId: string;
private storage_manager?: StorageManager;
private clipboard?: BrowserClipboard;
private clipboard_populator?: ClipboardPopulator;
@ -79,7 +79,7 @@ export class Editor implements Virgo {
constructor(props: EditorCtorProps) {
this.workspace = props.workspace;
this.views = props.views;
this.root_block_id = props.rootBlockId || '';
this._rootBlockId = props.rootBlockId;
this.hooks = new Hooks();
this.plugin_manager = new PluginManager(this, this.hooks);
this.plugin_manager.registerAll(props.plugins);
@ -108,9 +108,9 @@ export class Editor implements Virgo {
}
this.bdCommands = new Commands(props.workspace);
services.api.editorBlock.listenConnectivity(this.workspace, state => {
console.log(this.workspace, state);
});
// services.api.editorBlock.listenConnectivity(this.workspace, state => {
// console.log(this.workspace, state);
// });
services.api.editorBlock.onHistoryChange(
this.workspace,
@ -193,11 +193,7 @@ export class Editor implements Virgo {
/** Root Block Id */
getRootBlockId() {
return this.root_block_id;
}
setRootBlockId(rootBlockId: string) {
this.root_block_id = rootBlockId;
return this._rootBlockId;
}
setHotKeysScope(scope?: string) {

View File

@ -32,7 +32,11 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
await editor.dragDropManager.getGroupBlockByPoint(
new Point(e.clientX, e.clientY)
);
groupBlockNew && setGroupBlock(groupBlockNew || null);
if (groupBlockNew) {
setGroupBlock(groupBlockNew);
} else {
setGroupBlock(null);
}
},
[editor, setGroupBlock]
);

View File

@ -11,8 +11,7 @@ const createClipboardParse = ({
workspaceId,
rootBlockId,
}: CreateClipboardParseProps) => {
const editor = createEditor(workspaceId);
editor.setRootBlockId(rootBlockId);
const editor = createEditor(workspaceId, rootBlockId);
return new ClipboardParse(editor);
};