Merge pull request #334 from toeverything/refactor/render-block

Refactor/render block

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 = (
-            <>
-                {block.childrenIds.map(id => {
-                    return <BlockRender key={id} blockId={id} />;
-                })}
-            </>
-        );
+        const children = <RenderBlockChildren block={block} indent={false} />;
         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-blocks/src/blocks/group/GroupView.tsx

@@ -21,19 +21,6 @@ const SceneMap: Record<RecastScene, ComponentType<CreateView>> = {
     kanban: SceneKanban,
 } as const;
 
-const GroupBox = styled('div')(({ theme }) => {
-    return {
-        '&:hover': {
-            // Workaround referring to other components
-            // See https://emotion.sh/docs/styled#targeting-another-emotion-component
-            // [GroupActionWrapper.toString()]: {},
-            '& > *': {
-                visibility: 'visible',
-            },
-        },
-    };
-});
-
 const GroupActionWrapper = styled('div')(({ theme }) => ({
     height: '30px',
     display: 'flex',
@@ -59,6 +46,14 @@ const GroupActionWrapper = styled('div')(({ theme }) => ({
     },
 }));
 
+const GroupBox = styled('div')({
+    '&:hover': {
+        [GroupActionWrapper.toString()]: {
+            visibility: 'visible',
+        },
+    },
+});
+
 const GroupContainer = styled('div')<{ isSelect?: boolean }>(
     ({ isSelect, theme }) => ({
         background: theme.affine.palette.white,

libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx

@@ -41,7 +41,7 @@ export const AddViewMenu = () => {
                 onClick={() => setActivePanel(!activePanel)}
             >
                 <AddViewIcon fontSize="small" />
-                <span>Add View</span>
+                <span style={{ userSelect: 'none' }}>Add View</span>
                 {activePanel && (
                     <Panel>
                         <PanelItem>

libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx

@@ -20,7 +20,7 @@ export const ViewsMenu = () => {
         useRecastView();
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setViewName(e.target.value.trim());
+        setViewName(e.target.value);
     };
 
     const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -36,7 +36,7 @@ export const ViewsMenu = () => {
         }
         await updateView({
             ...activeView,
-            name: viewName,
+            name: viewName.trim(),
             type: viewType,
         });
         setActiveView(null);

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';