Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: expose editor by ref

Browse Source
This commit is contained in:
qishaoxuan
2022-07-27 15:24:40 +08:00
parent 5844abe078
commit c4b1c10ffc
2 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
libs/components/affine-editor/src/Editor.tsx
View File

@@ -1,6 +1,10 @@
import { useEffect, useRef } from 'react';
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { RenderRoot, RenderBlock } from '@toeverything/components/editor-core';
import {
RenderRoot,
RenderBlock,
type BlockEditor,
} from '@toeverything/components/editor-core';
import { useCurrentEditors } from '@toeverything/datasource/state';
import { createEditor } from './create-editor';
@@ -23,41 +27,40 @@ function useConstant<T>(init: () => T): T {
return ref.current;
}
export const AffineEditor = ({
workspace,
rootBlockId,
scrollBlank = true,
isWhiteboard,
}: AffineEditorProps) => {
const { setCurrentEditors } = useCurrentEditors();
const editor = useConstant(() => {
const editor = createEditor(workspace, isWhiteboard);
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;
});
// @ts-ignore
globalThis.virgo = editor;
return editor;
});
useEffect(() => {
if (rootBlockId) {
editor.setRootBlockId(rootBlockId);
} else {
console.error('rootBlockId for page is required. ');
}
}, [editor, rootBlockId]);
useImperativeHandle(ref, () => editor);
useEffect(() => {
if (!rootBlockId) return;
setCurrentEditors(prev => ({ ...prev, [rootBlockId]: editor }));
}, [editor, rootBlockId, setCurrentEditors]);
useEffect(() => {
if (rootBlockId) {
editor.setRootBlockId(rootBlockId);
} else {
console.error('rootBlockId for page is required. ');
}
}, [editor, rootBlockId]);
return (
<RenderRoot
editor={editor}
editorElement={AffineEditor as any}
scrollBlank={scrollBlank}
>
<RenderBlock blockId={rootBlockId} />
</RenderRoot>
);
};
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} />
</RenderRoot>
);
}
);