feat: add kanban card editable border

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

@@ -1,6 +1,6 @@
 import {
+    KanbanBlockRender,
     KanbanCard,
-    useBlockRender,
     useEditor,
     useKanban,
 } from '@toeverything/components/editor-core';
@@ -14,9 +14,9 @@ import { useFlag } from '@toeverything/datasource/feature-flags';
 import { useState, type MouseEvent } from 'react';
 import { useRefPage } from './RefPage';
 
-const CardContent = styled('div')({
+const CardContent = styled('div')(({ theme }) => ({
     margin: '20px',
-});
+}));
 
 const CardActions = styled('div')({
     cursor: 'pointer',
@@ -82,42 +82,38 @@ const Overlay = styled('div')({
     },
 });
 
-export const CardItem = ({
-    id,
-    block,
-}: {
-    id: KanbanCard['id'];
-    block: KanbanCard['block'];
-}) => {
+export const CardItem = ({ block }: { block: KanbanCard['block'] }) => {
     const { addSubItem } = useKanban();
     const { openSubPage } = useRefPage();
-    const [editable, setEditable] = useState(false);
+    const [editableBlock, setEditableBlock] = useState<string | null>(null);
     const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false);
     const { editor } = useEditor();
-    const { BlockRender } = useBlockRender();
 
     const onAddItem = async () => {
-        setEditable(true);
-        await addSubItem(block);
+        const newItem = await addSubItem(block);
+        setEditableBlock(newItem.id);
     };
 
     const onClickCard = async () => {
-        openSubPage(id);
+        openSubPage(block.id);
     };
 
     const onClickPen = (e: MouseEvent<Element>) => {
         e.stopPropagation();
-        setEditable(true);
+        setEditableBlock(block.id);
         editor.selectionManager.activeNodeByNodeId(block.id);
     };
 
     return (
-        <MuiClickAwayListener onClickAway={() => setEditable(false)}>
+        <MuiClickAwayListener onClickAway={() => setEditableBlock(null)}>
             <CardContainer>
                 <CardContent>
-                    <BlockRender blockId={id} />
+                    <KanbanBlockRender
+                        blockId={block.id}
+                        activeBlock={editableBlock}
+                    />
                 </CardContent>
-                {showKanbanRefPageFlag && !editable && (
+                {showKanbanRefPageFlag && !editableBlock && (
                     <Overlay onClick={onClickCard}>
                         <IconButton backgroundColor="#fff" onClick={onClickPen}>
                             <PenIcon />

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

@@ -6,11 +6,6 @@ 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 * from './render-block';
 export { MIN_PAGE_WIDTH, RenderRoot } from './RenderRoot';
 export * from './utils';

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

@@ -10,8 +10,6 @@ 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';
 
@@ -56,11 +54,9 @@ export const KanbanProvider = ({
     };
 
     return (
-        <BlockRenderProvider blockRender={KanbanBlockRender}>
-            <KanbanContext.Provider value={value}>
-                {children}
-            </KanbanContext.Provider>
-        </BlockRenderProvider>
+        <KanbanContext.Provider value={value}>
+            {children}
+        </KanbanContext.Provider>
     );
 };
 

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

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