refactor: update block

libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx

@@ -1,29 +1,28 @@
 import type { TextProps } from '@toeverything/components/common';
 import {
     ContentColumnValue,
-    services,
     Protocol,
+    services,
 } from '@toeverything/datasource/db-service';
 import { type CreateView } from '@toeverything/framework/virgo';
 import { useEffect, useRef, useState } from 'react';
 
+import {
+    BlockPendantProvider,
+    RenderBlockChildren,
+    supportChildren,
+    useOnSelect,
+} from '@toeverything/components/editor-core';
+import { styled } from '@toeverything/components/ui';
+import { BlockContainer } from '../../components/BlockContainer';
+import { List } from '../../components/style-container';
 import {
     TextManage,
     type ExtendedTextUtils,
 } from '../../components/text-manage';
 import { tabBlock } from '../../utils/indent';
+import { BulletIcon, getChildrenType, NumberType } from './data';
 import { BulletBlock, BulletProperties } from './types';
-import {
-    supportChildren,
-    RenderBlockChildren,
-    useOnSelect,
-    BlockPendantProvider,
-} from '@toeverything/components/editor-core';
-import { List } from '../../components/style-container';
-import { getChildrenType, BulletIcon, NumberType } from './data';
-import { IndentWrapper } from '../../components/IndentWrapper';
-import { BlockContainer } from '../../components/BlockContainer';
-import { styled } from '@toeverything/components/ui';
 
 export const defaultBulletProps: BulletProperties = {
     text: { value: [{ text: '' }] },
@@ -208,9 +207,7 @@ export const BulletView = ({ block, editor }: CreateView) => {
                     </div>
                 </List>
             </BlockPendantProvider>
-            <IndentWrapper>
-                <RenderBlockChildren block={block} />
-            </IndentWrapper>
+            <RenderBlockChildren block={block} />
         </BlockContainer>
     );
 };

libs/components/editor-blocks/src/blocks/bullet/index.ts

@@ -1,18 +1,16 @@
+import {
+    DefaultColumnsValue,
+    Protocol,
+} from '@toeverything/datasource/db-service';
 import {
     AsyncBlock,
     BaseView,
-    CreateView,
+    getTextHtml,
     getTextProperties,
     SelectBlock,
-    getTextHtml,
 } from '@toeverything/framework/virgo';
-import {
-    Protocol,
-    DefaultColumnsValue,
-} from '@toeverything/datasource/db-service';
 // import { withTreeViewChildren } from '../../utils/with-tree-view-children';
-import { defaultBulletProps, BulletView } from './BulletView';
-import { IndentWrapper } from '../../components/IndentWrapper';
+import { BulletView, defaultBulletProps } from './BulletView';
 
 export class BulletBlock extends BaseView {
     public type = Protocol.Block.Type.bullet;

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

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

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

@@ -1,16 +1,16 @@
-import { RenderBlock } from '@toeverything/components/editor-core';
-import { CreateView } from '@toeverything/framework/virgo';
-import React, { useEffect, useRef, useState } from 'react';
-import { GridHandle } from './GirdHandle';
+import { useBlockRender } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { CreateView } from '@toeverything/framework/virgo';
+import { debounce, domToRect, Point } from '@toeverything/utils';
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import {
     GRID_ITEM_CLASS_NAME,
     GRID_ITEM_CONTENT_CLASS_NAME,
 } from '../grid-item/GridItem';
-import { debounce, domToRect, Point } from '@toeverything/utils';
-import clsx from 'clsx';
-import { Protocol } from '@toeverything/datasource/db-service';
+import { GridHandle } from './GirdHandle';
 
 const DB_UPDATE_DELAY = 50;
 const GRID_ON_DRAG_CLASS = 'grid-layout-on-drag';
@@ -31,6 +31,7 @@ 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(
@@ -226,7 +227,7 @@ export const Grid = function (props: CreateView) {
                             key={id}
                             className={GRID_ITEM_CLASS_NAME}
                         >
-                            <RenderBlock hasContainer={false} blockId={id} />
+                            <BlockRender hasContainer={false} blockId={id} />
                             <GridHandle
                                 onDrag={event => handleDragGrid(event, i)}
                                 editor={editor}

libs/components/editor-blocks/src/blocks/group/ScenePage.tsx

@@ -2,5 +2,5 @@ import { RenderBlockChildren } from '@toeverything/components/editor-core';
 import type { CreateView } from '@toeverything/framework/virgo';
 
 export const ScenePage = ({ block }: CreateView) => {
-    return <RenderBlockChildren block={block} />;
+    return <RenderBlockChildren block={block} indent={false} />;
 };

libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx

@@ -1,6 +1,6 @@
 import {
     KanbanCard,
-    RenderBlock,
+    useBlockRender,
     useEditor,
     useKanban,
 } from '@toeverything/components/editor-core';
@@ -94,6 +94,7 @@ export const CardItem = ({
     const [editable, setEditable] = useState(false);
     const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false);
     const { editor } = useEditor();
+    const { BlockRender } = useBlockRender();
 
     const onAddItem = async () => {
         setEditable(true);
@@ -114,7 +115,7 @@ export const CardItem = ({
         <MuiClickAwayListener onClickAway={() => setEditable(false)}>
             <CardContainer>
                 <CardContent>
-                    <RenderBlock blockId={id} />
+                    <BlockRender blockId={id} />
                 </CardContent>
                 {showKanbanRefPageFlag && !editable && (
                     <Overlay onClick={onClickCard}>

libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx

@@ -1,8 +1,8 @@
 import { TextProps } from '@toeverything/components/common';
 import {
     ContentColumnValue,
-    services,
     Protocol,
+    services,
 } from '@toeverything/datasource/db-service';
 import { type CreateView } from '@toeverything/framework/virgo';
 import { useEffect, useRef, useState } from 'react';
@@ -11,18 +11,17 @@ import {
     type ExtendedTextUtils,
 } from '../../components/text-manage';
 import { tabBlock } from '../../utils/indent';
-import { IndentWrapper } from '../../components/IndentWrapper';
 import type { Numbered, NumberedAsyncBlock } from './types';
 
-import { getChildrenType, getNumber } from './data';
 import {
-    supportChildren,
-    RenderBlockChildren,
-    useOnSelect,
     BlockPendantProvider,
+    RenderBlockChildren,
+    supportChildren,
+    useOnSelect,
 } from '@toeverything/components/editor-core';
-import { List } from '../../components/style-container';
 import { BlockContainer } from '../../components/BlockContainer';
+import { List } from '../../components/style-container';
+import { getChildrenType, getNumber } from './data';
 
 export const defaultTodoProps: Numbered = {
     text: { value: [{ text: '' }] },
@@ -204,9 +203,7 @@ export const NumberedView = ({ block, editor }: CreateView) => {
                 </List>
             </BlockPendantProvider>
 
-            <IndentWrapper>
-                <RenderBlockChildren block={block} />
-            </IndentWrapper>
+            <RenderBlockChildren block={block} />
         </BlockContainer>
     );
 };

libs/components/editor-blocks/src/blocks/numbered/index.ts

@@ -1,17 +1,16 @@
+import {
+    DefaultColumnsValue,
+    Protocol,
+} from '@toeverything/datasource/db-service';
 import {
     AsyncBlock,
     BaseView,
+    getTextHtml,
     getTextProperties,
     SelectBlock,
-    getTextHtml,
 } from '@toeverything/framework/virgo';
-import {
-    Protocol,
-    DefaultColumnsValue,
-} from '@toeverything/datasource/db-service';
 // import { withTreeViewChildren } from '../../utils/with-tree-view-children';
 import { defaultTodoProps, NumberedView } from './NumberedView';
-import { IndentWrapper } from '../../components/IndentWrapper';
 
 export class NumberedBlock extends BaseView {
     public type = Protocol.Block.Type.numbered;

libs/components/editor-blocks/src/blocks/text/TextView.tsx

@@ -12,7 +12,6 @@ import { styled } from '@toeverything/components/ui';
 import { Protocol } from '@toeverything/datasource/db-service';
 import { CreateView } from '@toeverything/framework/virgo';
 import { BlockContainer } from '../../components/BlockContainer';
-import { IndentWrapper } from '../../components/IndentWrapper';
 import { TextManage } from '../../components/text-manage';
 import { dedentBlock, tabBlock } from '../../utils/indent';
 interface CreateTextView extends CreateView {
@@ -255,9 +254,7 @@ export const TextView = ({
                     handleTab={onTab}
                 />
             </BlockPendantProvider>
-            <IndentWrapper>
-                <RenderBlockChildren block={block} />
-            </IndentWrapper>
+            <RenderBlockChildren block={block} />
         </BlockContainer>
     );
 };

libs/components/editor-blocks/src/blocks/todo/TodoView.tsx

@@ -1,11 +1,17 @@
 import { TextProps } from '@toeverything/components/common';
+import {
+    AsyncBlock,
+    BlockPendantProvider,
+    CreateView,
+    useOnSelect,
+} from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import {
     ContentColumnValue,
     Protocol,
 } from '@toeverything/datasource/db-service';
-import { AsyncBlock, type CreateView } from '@toeverything/framework/virgo';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
+import { BlockContainer } from '../../components/BlockContainer';
 import {
     TextManage,
     type ExtendedTextUtils,
@@ -36,6 +42,10 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
 export const TodoView = ({ block, editor }: CreateView) => {
     const properties = { ...defaultTodoProps, ...block.getProperties() };
     const text_ref = useRef<ExtendedTextUtils>(null);
+    const [isSelect, setIsSelect] = useState<boolean>(false);
+    useOnSelect(block.id, (isSelect: boolean) => {
+        setIsSelect(isSelect);
+    });
 
     const turn_into_text_block = async () => {
         // Convert to text block
@@ -121,28 +131,34 @@ export const TodoView = ({ block, editor }: CreateView) => {
     };
 
     return (
-        <TodoBlock>
-            <div className={'checkBoxContainer'}>
-                <CheckBox
-                    checked={properties.checked?.value}
-                    onChange={on_checked_change}
-                />
-            </div>
+        <BlockContainer editor={editor} block={block} selected={isSelect}>
+            <BlockPendantProvider block={block}>
+                <TodoBlock>
+                    <div className={'checkBoxContainer'}>
+                        <CheckBox
+                            checked={properties.checked?.value}
+                            onChange={on_checked_change}
+                        />
+                    </div>
 
-            <div className={'textContainer'}>
-                <TextManage
-                    className={properties.checked?.value ? 'checked' : ''}
-                    ref={text_ref}
-                    editor={editor}
-                    block={block}
-                    supportMarkdown
-                    placeholder="To-do"
-                    handleEnter={on_text_enter}
-                    handleBackSpace={on_backspace}
-                    handleTab={on_tab}
-                />
-            </div>
-        </TodoBlock>
+                    <div className={'textContainer'}>
+                        <TextManage
+                            className={
+                                properties.checked?.value ? 'checked' : ''
+                            }
+                            ref={text_ref}
+                            editor={editor}
+                            block={block}
+                            supportMarkdown
+                            placeholder="To-do"
+                            handleEnter={on_text_enter}
+                            handleBackSpace={on_backspace}
+                            handleTab={on_tab}
+                        />
+                    </div>
+                </TodoBlock>
+            </BlockPendantProvider>
+        </BlockContainer>
     );
 };
 

libs/components/editor-blocks/src/blocks/todo/index.ts

@@ -1,18 +1,16 @@
 import {
-    BaseView,
-    getTextProperties,
     AsyncBlock,
-    SelectBlock,
+    BaseView,
     getTextHtml,
-} from '@toeverything/framework/virgo';
-// import type { CreateView } from '@toeverything/framework/virgo';
+    getTextProperties,
+    SelectBlock,
+    withTreeViewChildren,
+} from '@toeverything/components/editor-core';
 import {
-    Protocol,
     DefaultColumnsValue,
+    Protocol,
 } from '@toeverything/datasource/db-service';
-// import { withTreeViewChildren } from '../../utils/with-tree-view-children';
-import { withTreeViewChildren } from '../../utils/WithTreeViewChildren';
-import { TodoView, defaultTodoProps } from './TodoView';
+import { defaultTodoProps, TodoView } from './TodoView';
 import type { TodoAsyncBlock } from './types';
 
 export class TodoBlock extends BaseView {