init: the first public commit for AFFiNE

libs/components/affine-editor/src/Editor.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'react';
+
+import { RenderRoot, RenderBlock } from '@toeverything/components/editor-core';
+import { useCurrentEditors } from '@toeverything/datasource/state';
+
+import { createEditor } from './create-editor';
+
+interface AffineEditorProps {
+    workspace: string;
+    rootBlockId: string;
+    /**
+     * Whether to show the visual blank at the bottom of the article
+     */
+    scrollBlank?: boolean;
+
+    isWhiteboard?: boolean;
+}
+
+function useConstant<T>(init: () => T): T {
+    const ref = useRef<T>(null);
+    ref.current ??= init();
+
+    return ref.current;
+}
+
+export const AffineEditor = ({
+    workspace,
+    rootBlockId,
+    scrollBlank = true,
+    isWhiteboard,
+}: AffineEditorProps) => {
+    const { setCurrentEditors } = useCurrentEditors();
+    const editor = useConstant(() => {
+        const editor = createEditor(workspace, isWhiteboard);
+
+        // @ts-ignore
+        globalThis.virgo = editor;
+        return 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} />
+        </RenderRoot>
+    );
+};

libs/components/affine-editor/src/create-editor.ts

@@ -0,0 +1,63 @@
+import { BlockEditor } from '@toeverything/framework/virgo';
+import {
+    PageBlock,
+    RefLinkBlock,
+    TextBlock,
+    Heading1Block,
+    Heading2Block,
+    Heading3Block,
+    QuoteBlock,
+    TodoBlock,
+    CodeBlock,
+    // TocBlock,
+    FileBlock,
+    ImageBlock,
+    DividerBlock,
+    CalloutBlock,
+    YoutubeBlock,
+    FigmaBlock,
+    GroupBlock,
+    EmbedLinkBlock,
+    BulletBlock,
+    NumberedBlock,
+    GridBlock,
+    GridItemBlock,
+    GroupDividerBlock,
+} from '@toeverything/components/editor-blocks';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { plugins } from '@toeverything/components/editor-plugins';
+
+export const createEditor = (workspace: string, isWhiteboard?: boolean) => {
+    const blockEditor = new BlockEditor({
+        workspace,
+        views: {
+            [Protocol.Block.Type.page]: new PageBlock(),
+            [Protocol.Block.Type.reference]: new RefLinkBlock(),
+            [Protocol.Block.Type.text]: new TextBlock(),
+            [Protocol.Block.Type.heading1]: new Heading1Block(),
+            [Protocol.Block.Type.heading2]: new Heading2Block(),
+            [Protocol.Block.Type.heading3]: new Heading3Block(),
+            [Protocol.Block.Type.quote]: new QuoteBlock(),
+            [Protocol.Block.Type.todo]: new TodoBlock(),
+            [Protocol.Block.Type.code]: new CodeBlock(),
+            // [Protocol.Block.Type.toc]: new TocBlock(),
+            [Protocol.Block.Type.file]: new FileBlock(),
+            [Protocol.Block.Type.image]: new ImageBlock(),
+            [Protocol.Block.Type.divider]: new DividerBlock(),
+            [Protocol.Block.Type.callout]: new CalloutBlock(),
+            [Protocol.Block.Type.youtube]: new YoutubeBlock(),
+            [Protocol.Block.Type.figma]: new FigmaBlock(),
+            [Protocol.Block.Type.group]: new GroupBlock(),
+            [Protocol.Block.Type.embedLink]: new EmbedLinkBlock(),
+            [Protocol.Block.Type.numbered]: new NumberedBlock(),
+            [Protocol.Block.Type.bullet]: new BulletBlock(),
+            [Protocol.Block.Type.grid]: new GridBlock(),
+            [Protocol.Block.Type.gridItem]: new GridItemBlock(),
+            [Protocol.Block.Type.groupDivider]: new GroupDividerBlock(),
+        },
+        plugins,
+        isWhiteboard,
+    });
+
+    return blockEditor;
+};

libs/components/affine-editor/src/index.ts

@@ -0,0 +1,2 @@
+export { AffineEditor } from './Editor';
+export { createEditor } from './create-editor';