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