refactor: update editor

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

@@ -1,7 +1,6 @@
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
 import {
-    RenderBlock,
     RenderRoot,
     type BlockEditor,
 } from '@toeverything/components/editor-core';
@@ -88,9 +87,7 @@ export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
                 editor={editor}
                 editorElement={AffineEditor as any}
                 scrollBlank={scrollBlank}
-            >
+            />
-                <RenderBlock blockId={editor.getRootBlockId()} />
-            </RenderRoot>
         );
     }
 );

libs/components/editor-core/src/Contexts.tsx

@@ -1,22 +1,34 @@
-import { createContext, useContext } from 'react';
-import type { BlockEditor, AsyncBlock } from './editor';
 import { genErrorObj } from '@toeverything/utils';
+import { createContext, PropsWithChildren, useContext } from 'react';
+import type { AsyncBlock, BlockEditor } from './editor';
 
-const RootContext = createContext<{
+type EditorProps = {
     editor: BlockEditor;
     // TODO: Temporary fix, dependencies in the new architecture are bottom-up, editors do not need to be passed down from the top
     editorElement: () => JSX.Element;
-}>(
+};
+
+const EditorContext = createContext<EditorProps>(
     genErrorObj(
-        'Failed to get context! The context only can use under the "render-root"'
+        'Failed to get EditorContext! The context only can use under the "render-root"'
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ) as any
 );
 
-export const EditorProvider = RootContext.Provider;
-
 export const useEditor = () => {
-    return useContext(RootContext);
+    return useContext(EditorContext);
+};
+
+export const EditorProvider = ({
+    editor,
+    editorElement,
+    children,
+}: PropsWithChildren<EditorProps>) => {
+    return (
+        <EditorContext.Provider value={{ editor, editorElement }}>
+            {children}
+        </EditorContext.Provider>
+    );
 };
 
 /**

libs/components/editor-core/src/RenderRoot.tsx

@@ -4,12 +4,12 @@ import {
     services,
     type ReturnUnobserve,
 } from '@toeverything/datasource/db-service';
-import type { PropsWithChildren } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { EditorProvider } from './Contexts';
 import type { BlockEditor } from './editor';
 import { useIsOnDrag } from './hooks';
 import { addNewGroup, appendNewGroup } from './recast-block';
+import { BlockRenderProvider, RenderBlock } from './render-block';
 import { SelectionRect, SelectionRef } from './Selection';
 
 interface RenderRootProps {
@@ -24,11 +24,7 @@ interface RenderRootProps {
 const MAX_PAGE_WIDTH = 5000;
 export const MIN_PAGE_WIDTH = 1480;
 
-export const RenderRoot = ({
+export const RenderRoot = ({ editor, editorElement }: RenderRootProps) => {
-    editor,
-    editorElement,
-    children,
-}: PropsWithChildren<RenderRootProps>) => {
     const selectionRef = useRef<SelectionRef>(null);
     const triggeredBySelect = useRef(false);
     const [pageWidth, setPageWidth] = useState<number>(MIN_PAGE_WIDTH);
@@ -158,39 +154,43 @@ export const RenderRoot = ({
     };
 
     return (
-        <EditorProvider value={{ editor, editorElement }}>
+        <EditorProvider editor={editor} editorElement={editorElement}>
-            <Container
+            <BlockRenderProvider blockRender={RenderBlock}>
-                isEdgeless={editor.isEdgeless}
+                <Container
-                ref={ref => {
+                    isEdgeless={editor.isEdgeless}
-                    if (ref != null && ref !== editor.container) {
+                    ref={ref => {
-                        editor.container = ref;
+                        if (ref != null && ref !== editor.container) {
-                        editor.getHooks().render();
+                            editor.container = ref;
-                    }
+                            editor.getHooks().render();
-                }}
+                        }
-                onMouseMove={onMouseMove}
+                    }}
-                onMouseDown={onMouseDown}
+                    onMouseMove={onMouseMove}
-                onMouseUp={onMouseUp}
+                    onMouseDown={onMouseDown}
-                onMouseLeave={onMouseLeave}
+                    onMouseUp={onMouseUp}
-                onMouseOut={onMouseOut}
+                    onMouseLeave={onMouseLeave}
-                onContextMenu={onContextmenu}
+                    onMouseOut={onMouseOut}
-                onKeyDown={onKeyDown}
+                    onContextMenu={onContextmenu}
-                onKeyDownCapture={onKeyDownCapture}
+                    onKeyDown={onKeyDown}
-                onKeyUp={onKeyUp}
+                    onKeyDownCapture={onKeyDownCapture}
-                onDragOver={onDragOver}
+                    onKeyUp={onKeyUp}
-                onDragLeave={onDragLeave}
+                    onDragOver={onDragOver}
-                onDragOverCapture={onDragOverCapture}
+                    onDragLeave={onDragLeave}
-                onDragEnd={onDragEnd}
+                    onDragOverCapture={onDragOverCapture}
-                onDrop={onDrop}
+                    onDragEnd={onDragEnd}
-                isOnDrag={isOnDrag}
+                    onDrop={onDrop}
-            >
+                    isOnDrag={isOnDrag}
-                <Content style={{ maxWidth: pageWidth + 'px' }}>
+                >
-                    {children}
+                    <Content style={{ maxWidth: pageWidth + 'px' }}>
-                </Content>
+                        <RenderBlock blockId={editor.getRootBlockId()} />
-                {/** TODO: remove selectionManager insert */}
+                    </Content>
-                {editor && <SelectionRect ref={selectionRef} editor={editor} />}
+                    {/** TODO: remove selectionManager insert */}
-                {editor.isEdgeless ? null : <ScrollBlank editor={editor} />}
+                    {editor && (
-                {patchedNodes}
+                        <SelectionRect ref={selectionRef} editor={editor} />
-            </Container>
+                    )}
+                    {editor.isEdgeless ? null : <ScrollBlank editor={editor} />}
+                    {patchedNodes}
+                </Container>
+            </BlockRenderProvider>
         </EditorProvider>
     );
 };
@@ -251,7 +251,7 @@ function ScrollBlank({ editor }: { editor: BlockEditor }) {
     );
 
     return (
-        <ScrollBlankContainter
+        <ScrollBlankContainer
             onMouseDown={onMouseDown}
             onMouseMove={onMouseMove}
             onClick={onClick}
@@ -283,7 +283,7 @@ const Content = styled('div')({
     transitionTimingFunction: 'ease-in',
 });
 
-const ScrollBlankContainter = styled('div')({
+const ScrollBlankContainer = styled('div')({
     paddingBottom: '30vh',
     margin: `0 -${PADDING_X}px`,
 });

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

@@ -1,19 +1,16 @@
-export { RenderRoot, MIN_PAGE_WIDTH } from './RenderRoot';
-export * from './render-block';
-export * from './hooks';
-
-export { RenderBlock } from './render-block';
-
-export * from './recast-block';
-export * from './recast-block/types';
-
 export * from './block-pendant';
-
+export { useEditor } from './Contexts';
+export * from './editor';
+export * from './hooks';
 export * from './kanban';
 export * from './kanban/types';
-
+export * from './recast-block';
+export * from './recast-block/types';
+export {
+    BlockRenderProvider,
+    RenderBlockChildren,
+    useBlockRender,
+    withTreeViewChildren,
+} from './render-block';
+export { MIN_PAGE_WIDTH, RenderRoot } from './RenderRoot';
 export * from './utils';
-
-export * from './editor';
-
-export { useEditor } from './Contexts';

libs/components/editor-core/src/kanban/Context.tsx

@@ -10,6 +10,8 @@ import {
     RecastMetaProperty,
     RecastPropertyId,
 } from '../recast-block/types';
+import { BlockRenderProvider } from '../render-block';
+import { KanbanBlockRender } from '../render-block/RenderKanbanBlock';
 import { useInitKanbanEffect, useRecastKanban } from './kanban';
 import { KanbanGroup } from './types';
 
@@ -54,9 +56,11 @@ export const KanbanProvider = ({
     };
 
     return (
-        <KanbanContext.Provider value={value}>
+        <BlockRenderProvider blockRender={KanbanBlockRender}>
-            {children}
+            <KanbanContext.Provider value={value}>
-        </KanbanContext.Provider>
+                {children}
+            </KanbanContext.Provider>
+        </BlockRenderProvider>
     );
 };