Revert "Merge pull request #42 from toeverything/feat/sub-page"

This reverts commit cf6491fb0c, reversing
changes made to e12deb302f.

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

@@ -25,7 +25,7 @@ const AddCard = ({ group }: { group: KanbanGroup }) => {
     const { addCard } = useKanban();
     const handleClick = useCallback(async () => {
         await addCard(group);
-    }, [addCard, group]);
+    }, [addCard]);
     return <AddCardWrapper onClick={handleClick}>+</AddCardWrapper>;
 };
 

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

@@ -1,11 +1,6 @@
 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 { styled } from '@toeverything/components/ui';
-import { useFlag } from '@toeverything/datasource/feature-flags';
 
 const CardContent = styled('div')({
     margin: '20px',
@@ -63,24 +58,18 @@ export const CardItem = ({
     block: KanbanCard['block'];
 }) => {
     const { addSubItem } = useKanban();
-    const { openSubPage } = useRefPage();
-    const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false);
     const onAddItem = async () => {
         await addSubItem(block);
     };
 
-    const onClickCard = async () => {
-        showKanbanRefPageFlag && openSubPage(id);
-    };
-
     return (
-        <CardContainer onClick={onClickCard}>
+        <CardContainer>
             <CardContent>
                 <RenderBlock blockId={id} />
             </CardContent>
             <CardActions onClick={onAddItem}>
                 <PlusIcon />
-                <span>Add a sub-block</span>
+                <span>Add item</span>
             </CardActions>
         </CardContainer>
     );

libs/components/editor-core/src/RenderRoot.tsx

@@ -2,7 +2,7 @@ import type { BlockEditor } from './editor';
 import { styled, usePatchNodes } from '@toeverything/components/ui';
 import type { FC, PropsWithChildren } from 'react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { EditorProvider } from './Contexts';
+import { RootContext } from './contexts';
 import { SelectionRect, SelectionRef } from './Selection';
 import {
     Protocol,
@@ -151,7 +151,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
     };
 
     return (
-        <EditorProvider value={{ editor, editorElement }}>
+        <RootContext.Provider value={{ editor, editorElement }}>
             <Container
                 isWhiteboard={editor.isWhiteboard}
                 ref={ref => {
@@ -183,7 +183,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
                 {editor.isWhiteboard ? null : <ScrollBlank editor={editor} />}
                 {patchedNodes}
             </Container>
-        </EditorProvider>
+        </RootContext.Provider>
     );
 };
 

libs/components/editor-core/src/contexts.tsx

@@ -1,8 +1,9 @@
 import { createContext, useContext } from 'react';
 import type { BlockEditor, AsyncBlock } from './editor';
+import type { Column } from '@toeverything/datasource/db-service';
 import { genErrorObj } from '@toeverything/utils';
 
-const RootContext = createContext<{
+export const RootContext = createContext<{
     editor: BlockEditor;
     // TODO: Temporary fix, dependencies in the new architecture are bottom-up, editors do not need to be passed down from the top
     editorElement: () => JSX.Element;
@@ -13,8 +14,6 @@ const RootContext = createContext<{
     ) as any
 );
 
-export const EditorProvider = RootContext.Provider;
-
 export const useEditor = () => {
     return useContext(RootContext);
 };
@@ -23,3 +22,16 @@ export const useEditor = () => {
  * @deprecated
  */
 export const BlockContext = createContext<AsyncBlock>(null as any);
+
+/**
+ * Context of column information
+ *
+ * @deprecated
+ */
+export const ColumnsContext = createContext<{
+    fromId: string;
+    columns: Column[];
+}>({
+    fromId: '',
+    columns: [],
+});

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

@@ -1,6 +1,3 @@
-import { noop, Point } from '@toeverything/utils';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useEditor } from './Contexts';
 import {
     AsyncBlock,
     BlockEditor,
@@ -8,6 +5,9 @@ import {
     SelectionInfo,
     SelectionSettingsMap,
 } from './editor';
+import { noop, Point } from '@toeverything/utils';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { RootContext } from './contexts';
 
 function useRequestReRender() {
     const [, setUpdateCounter] = useState(0);
@@ -56,7 +56,7 @@ function useRequestReRender() {
 export const useBlock = (blockId: string) => {
     const [block, setBlock] = useState<AsyncBlock>();
     const requestReRender = useRequestReRender();
-    const { editor } = useEditor();
+    const { editor } = useContext(RootContext);
     useEffect(() => {
         if (!blockId) {
             return undefined;
@@ -95,7 +95,7 @@ export const useOnSelect = (
     blockId: string,
     cb: (isSelect: boolean) => void
 ) => {
-    const { editor } = useEditor();
+    const { editor } = useContext(RootContext);
     useEffect(() => {
         editor.selectionManager.observe(blockId, SelectEventTypes.onSelect, cb);
         return () => {
@@ -117,7 +117,7 @@ export const useOnSelectActive = (
     blockId: string,
     cb: (position: Point | undefined) => void
 ) => {
-    const { editor } = useEditor();
+    const { editor } = useContext(RootContext);
     useEffect(() => {
         editor.selectionManager.observe(blockId, SelectEventTypes.active, cb);
         return () => {
@@ -139,7 +139,7 @@ export const useOnSelectSetSelection = <T extends keyof SelectionSettingsMap>(
     blockId: string,
     cb: (args: SelectionSettingsMap[T]) => void
 ) => {
-    const { editor } = useEditor();
+    const { editor } = useContext(RootContext);
     useEffect(() => {
         editor.selectionManager.observe(
             blockId,
@@ -162,7 +162,7 @@ export const useOnSelectSetSelection = <T extends keyof SelectionSettingsMap>(
  * @export
  */
 export const useOnSelectChange = (cb: (info: SelectionInfo) => void) => {
-    const { editor } = useEditor();
+    const { editor } = useContext(RootContext);
     useEffect(() => {
         editor.selectionManager.onSelectionChange(cb);
         return () => {
@@ -177,7 +177,7 @@ export const useOnSelectChange = (cb: (info: SelectionInfo) => void) => {
  * @export
  */
 export const useOnSelectEnd = (cb: (info: SelectionInfo) => void) => {
-    const { editor } = useEditor();
+    const { editor } = useContext(RootContext);
     useEffect(() => {
         editor.selectionManager.onSelectEnd(cb);
         return () => {
@@ -195,7 +195,7 @@ export const useOnSelectStartWith = (
     blockId: string,
     cb: (args: MouseEvent) => void
 ) => {
-    const { editor } = useEditor();
+    const { editor } = useContext(RootContext);
     useEffect(() => {
         editor.mouseManager.onSelectStartWith(blockId, cb);
         return () => {

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

@@ -1,3 +1,4 @@
+export { ColumnsContext, RootContext } from './contexts';
 export { RenderRoot, MIN_PAGE_WIDTH } from './RenderRoot';
 export * from './render-block';
 export * from './hooks';
@@ -15,5 +16,3 @@ export * from './kanban/types';
 export * from './utils';
 
 export * from './editor';
-
-export { RefPageProvider, useRefPage } from './ref-page';

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

@@ -1,6 +1,6 @@
 import { Protocol } from '@toeverything/datasource/db-service';
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { useEditor } from '../Contexts';
+import { useEditor } from '../contexts';
 import { AsyncBlock } from '../editor';
 import { useRecastView } from '../recast-block';
 import { useRecastBlock } from '../recast-block/Context';

libs/components/editor-core/src/recast-block/Context.tsx

@@ -2,7 +2,6 @@ import { Protocol } from '@toeverything/datasource/db-service';
 import { AsyncBlock } from '../editor';
 import { ComponentType, createContext, ReactNode, useContext } from 'react';
 import { RecastBlock } from './types';
-import { RefPageProvider } from '../ref-page';
 
 /**
  * Determine whether the block supports RecastBlock
@@ -48,7 +47,7 @@ export const RecastBlockProvider = ({
 
     return (
         <RecastBlockContext.Provider value={block}>
-            <RefPageProvider>{children}</RefPageProvider>
+            {children}
         </RecastBlockContext.Provider>
     );
 };
@@ -61,7 +60,7 @@ export const useRecastBlock = () => {
     const recastBlock = useContext(RecastBlockContext);
     if (!recastBlock) {
         throw new Error(
-            'Failed to find recastBlock! Please use the hook under `RecastBlockProvider`.'
+            'Failed to find recastBlock! Please use the hook under `RecastTableProvider`.'
         );
     }
     return recastBlock;

libs/components/editor-core/src/recast-block/README.md

@@ -49,3 +49,22 @@ const SomeBlock = () => {
     return <div>...</div>;
 };
 ```
+
+## Scene
+
+**Notice: The scene API will refactor at next version.**
+
+```tsx
+const SomeBlock = () => {
+    const { scene, setScene, setPage, setTable, setKanban } =
+        useRecastBlockScene();
+
+    return (
+        <>
+            <div>Scene: {scene}</div>
+            <button onClick={setPage}>list</button>
+            <button onClick={setKanban}>kanban</button>
+        </>
+    );
+};
+```

libs/components/editor-core/src/recast-block/group.ts

@@ -32,7 +32,7 @@ export const mergeGroup = async (...groups: AsyncBlock[]) => {
         );
     }
 
-    await mergeGroupProperties(...(groups as unknown as RecastBlock[]));
+    await mergeGroupProperties(...(groups as RecastBlock[]));
 
     const [headGroup, ...restGroups] = groups;
     // Add all children to the head group
@@ -174,7 +174,7 @@ export const splitGroup = async (
     }
 
     splitGroupProperties(
-        group as unknown as RecastBlock,
+        group as RecastBlock,
         newGroupBlock as unknown as RecastBlock
     );
     await group.after(newGroupBlock);

libs/components/editor-core/src/ref-page/ModalPage.tsx

@@ -1,90 +0,0 @@
-import { MuiBackdrop, styled, useTheme } from '@toeverything/components/ui';
-import { createContext, ReactNode, useContext, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useEditor } from '../Contexts';
-import { RenderBlock } from '../render-block';
-
-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 => {
-                    e.stopPropagation();
-                }}
-            >
-                {children}
-            </Dialog>
-        </MuiBackdrop>,
-
-        document.body
-    );
-};
-
-const ModalPage = ({ blockId }: { blockId: string | null }) => {
-    const { editor } = useEditor();
-
-    return (
-        <Modal open={!!blockId}>
-            {blockId && <RenderBlock blockId={blockId} />}
-        </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 = () => {};

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

@@ -1 +0,0 @@
-export { useRefPage, RefPageProvider } from './ModalPage';

libs/components/editor-core/src/render-block/RenderBlock.tsx

@@ -1,8 +1,8 @@
-import { styled } from '@toeverything/components/ui';
-import { FC, useLayoutEffect, useMemo, useRef } from 'react';
+import { styled, Theme } from '@toeverything/components/ui';
+import { FC, useContext, useLayoutEffect, useMemo, useRef } from 'react';
 
 // import { RenderChildren } from './RenderChildren';
-import { useEditor } from '../Contexts';
+import { RootContext } from '../contexts';
 import { useBlock } from '../hooks';
 
 interface RenderBlockProps {
@@ -14,7 +14,7 @@ export const RenderBlock: FC<RenderBlockProps> = ({
     blockId,
     hasContainer = true,
 }) => {
-    const { editor, editorElement } = useEditor();
+    const { editor, editorElement } = useContext(RootContext);
     const { block } = useBlock(blockId);
     const blockRef = useRef<HTMLDivElement>(null);
 

libs/components/ui/src/mui.ts

@@ -13,7 +13,6 @@ import type {
 } from '@mui/material';
 import {
     Avatar,
-    Backdrop,
     Box,
     Button,
     Checkbox,
@@ -244,7 +243,3 @@ export const MuiFade = Fade;
  * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
  */
 export const MuiRadio = Radio;
-/**
- * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
- */
-export const MuiBackdrop = Backdrop;

libs/datasource/feature-flags/README.md

@@ -2,15 +2,7 @@
 
 ## Usage
 
--   Set token at environment variable
-    -   The key can be obtained from the [Feature Flag Portal](https://portal.featureflag.co/account-settings/projects)
-
-```shell
-# .env.local
-AFFINE_FEATURE_FLAG_TOKEN=XXXXXXX
-```
-
--   Set provider
+-   set provider
 
 ```tsx
 import { FeatureFlagsProvider } from '@toeverything/datasource/feature-flags';
@@ -50,8 +42,7 @@ const App = () => {
 
 **When entering development mode feature flag will NOT be updated in real time**
 
--   `activateFfcDevMode(PASSWORD)` play with feature flags locally
-    -   The `devModePassword` can be obtained from `src/config.ts`
+-   `activateFfcDevMode()` play with feature flags locally
 -   `quitFfcDevMode()` quit dev mode
 
 ## Running unit tests

libs/datasource/feature-flags/src/config.ts

@@ -8,18 +8,4 @@ export const config: IOption = {
     //   id: 'the user's unique identifier'
     // }
     devModePassword: '-',
-    enableDataSync: !!process.env['AFFINE_FEATURE_FLAG_TOKEN'],
-    // bootstrap: [
-    //     {
-    //         // the feature flag key
-    //         id: 'flag',
-    //         // the feature flag value
-    //         variation: false,
-    //         // the variation data type, string is used if not provided
-    //         variationType: VariationDataType.boolean,
-    //         variationOptions: [],
-    //         timestamp: 0,
-    //         sendToExperiment: false,
-    //     },
-    // ],
 };