refactor: ref page use AffineEditor

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

@@ -1,9 +1,5 @@
 import type { KanbanCard } from '@toeverything/components/editor-core';
-import {
-    RenderBlock,
-    useKanban,
-    useRefPage,
-} from '@toeverything/components/editor-core';
+import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
 import { PenIcon } from '@toeverything/components/icons';
 import {
     IconButton,
@@ -12,6 +8,7 @@ import {
 } from '@toeverything/components/ui';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 import { useState } from 'react';
+import { useRefPage } from './RefPage';
 
 const CardContent = styled('div')({
     margin: '20px',

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

@@ -0,0 +1,97 @@
+import { AffineEditor } from '@toeverything/components/affine-editor';
+import { useEditor } from '@toeverything/components/editor-core';
+import { MuiBackdrop, styled, useTheme } from '@toeverything/components/ui';
+import { createContext, ReactNode, useContext, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+const Dialog = styled('div')({
+    flex: 1,
+    width: '880px',
+    margin: '72px auto',
+    background: '#fff',
+    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    borderRadius: '10px',
+    padding: '72px 120px',
+    overflow: 'scroll',
+});
+
+const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => {
+    const theme = useTheme();
+    const { closeSubPage } = useRefPage();
+
+    return createPortal(
+        <MuiBackdrop
+            open={open}
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                background: 'rgba(58, 76, 92, 0.4)',
+                zIndex: theme.affine.zIndex.popover,
+            }}
+            onClick={closeSubPage}
+        >
+            <Dialog
+                onClick={(e: { stopPropagation: () => void }) => {
+                    e.stopPropagation();
+                }}
+            >
+                {children}
+            </Dialog>
+        </MuiBackdrop>,
+
+        document.body
+    );
+};
+
+const ModalPage = ({ blockId }: { blockId: string | null }) => {
+    const { editor } = useEditor();
+
+    return (
+        <Modal open={!!blockId}>
+            {blockId && (
+                <AffineEditor
+                    workspace={editor.workspace}
+                    rootBlockId={blockId}
+                    scrollBlank={false}
+                    isWhiteboard
+                />
+            )}
+        </Modal>
+    );
+};
+
+const RefPageContext = createContext<
+    ReturnType<typeof useState<string | null>> | undefined
+>(undefined);
+
+export const RefPageProvider = ({ children }: { children: ReactNode }) => {
+    const state = useState<string | null>();
+    const [blockId, setBlockId] = state;
+
+    return (
+        <RefPageContext.Provider value={state}>
+            {children}
+            <ModalPage blockId={blockId ?? null} />
+        </RefPageContext.Provider>
+    );
+};
+
+export const useRefPage = () => {
+    const context = useContext(RefPageContext);
+    if (!context) {
+        throw new Error(
+            'Wrap your app inside of a `SubPageProvider` to have access to the hook context!'
+        );
+    }
+    const [blockId, setBlockId] = context;
+    const openSubPage = (blockId: string) => {
+        setBlockId(blockId);
+    };
+    const closeSubPage = () => {
+        setBlockId(null);
+    };
+
+    return { blockId, open: !!blockId, openSubPage, closeSubPage };
+};
+
+// export const openSubPage = () => {};