refactor: remove useBlockRender

libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx

@@ -1,4 +1,4 @@
-import { useBlockRender } from '@toeverything/components/editor-core';
+import { RenderBlockChildren } from '@toeverything/components/editor-core';
 import { ChildrenView, CreateView } from '@toeverything/framework/virgo';
 
 export const GridItemRender = function (
@@ -6,14 +6,7 @@ export const GridItemRender = function (
 ) {
     const GridItem = function (props: CreateView) {
         const { block } = props;
-        const { BlockRender } = useBlockRender();
+        const children = <RenderBlockChildren block={block} indent={false} />;
-        const children = (
-            <>
-                {block.childrenIds.map(id => {
-                    return <BlockRender key={id} blockId={id} />;
-                })}
-            </>
-        );
         return <>{creator({ ...props, children })}</>;
     };
     return GridItem;

libs/components/editor-blocks/src/blocks/grid/Grid.tsx

@@ -1,4 +1,4 @@
-import { useBlockRender } from '@toeverything/components/editor-core';
+import { BlockRender } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import { Protocol } from '@toeverything/datasource/db-service';
 import { CreateView } from '@toeverything/framework/virgo';
@@ -31,7 +31,6 @@ export const Grid = function (props: CreateView) {
     const originalLeftWidth = useRef<number>(gridItemMinWidth);
     const originalRightWidth = useRef<number>(gridItemMinWidth);
     const [alertHandleId, setAlertHandleId] = useState<string>(null);
-    const { BlockRender } = useBlockRender();
 
     const getLeftRightGridItemDomByIndex = (index: number) => {
         const gridItems = Array.from(gridContainerRef.current?.children).filter(

libs/components/editor-core/src/render-block/Context.tsx

@@ -3,7 +3,7 @@ import { createContext, PropsWithChildren, useContext } from 'react';
 import { RenderBlockProps } from './RenderBlock';
 
 type BlockRenderProps = {
-    blockRender: (args: RenderBlockProps) => JSX.Element | null;
+    blockRender: (args: RenderBlockProps) => JSX.Element;
 };
 
 export const BlockRenderContext = createContext<BlockRenderProps>(
@@ -27,9 +27,14 @@ export const BlockRenderProvider = ({
     );
 };
 
-export const useBlockRender = () => {
+const useBlockRender = () => {
     const { blockRender } = useContext(BlockRenderContext);
     return {
         BlockRender: blockRender,
     };
 };
+
+export const BlockRender = (props: RenderBlockProps) => {
+    const { BlockRender } = useBlockRender();
+    return <BlockRender {...props} />;
+};

libs/components/editor-core/src/render-block/RenderBlock.tsx

@@ -7,7 +7,8 @@ import { useBlock } from '../hooks';
 /**
  * Render nothing
  */
-export const NullBlockRender = (): null => null;
+// eslint-disable-next-line react/jsx-no-useless-fragment
+export const NullBlockRender = () => <></>;
 
 export interface RenderBlockProps {
     blockId: string;
@@ -22,7 +23,7 @@ export function RenderBlock({
     const { block } = useBlock(blockId);
 
     const setRef = useCallback(
-        (dom: HTMLElement) => {
+        (dom: HTMLElement | null) => {
             if (block != null && dom != null) {
                 block.dom = dom;
             }

libs/components/editor-core/src/render-block/RenderBlockChildren.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@toeverything/components/ui';
 import type { AsyncBlock } from '../editor';
-import { useBlockRender } from './Context';
+import { BlockRender } from './Context';
 import { NullBlockRender } from './RenderBlock';
 
 export interface RenderChildrenProps {
@@ -12,7 +12,6 @@ export const RenderBlockChildren = ({
     block,
     indent = true,
 }: RenderChildrenProps) => {
-    const { BlockRender } = useBlockRender();
     if (BlockRender === NullBlockRender) {
         return null;
     }

libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx

@@ -7,7 +7,7 @@ import type {
 } from 'react';
 import { forwardRef } from 'react';
 import { CreateView } from '../editor';
-import { useBlockRender } from './Context';
+import { BlockRender } from './Context';
 import { NullBlockRender } from './RenderBlock';
 
 type WithChildrenConfig = {
@@ -60,7 +60,6 @@ export const withTreeViewChildren = (
 
     return (props: CreateView) => {
         const { block } = props;
-        const { BlockRender } = useBlockRender();
         const collapsed = block.getProperty('collapsed')?.value;
         const childrenIds = block.childrenIds;
         const showChildren =

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

@@ -1,4 +1,4 @@
-export { BlockRenderProvider, useBlockRender } from './Context';
+export { BlockRender, BlockRenderProvider } from './Context';
 export { NullBlockRender, RenderBlock } from './RenderBlock';
 export { RenderBlockChildren } from './RenderBlockChildren';
 export { KanbanBlockRender } from './RenderKanbanBlock';