From ecc708017968e4beca2c62979c257ef53cfd5b02 Mon Sep 17 00:00:00 2001 From: DarkSky Date: Fri, 5 Aug 2022 22:06:31 +0800 Subject: [PATCH] Revert "Merge pull request #42 from toeverything/feat/sub-page" This reverts commit cf6491fb0c7cf0b031f0b87b145ca3a98c687c88, reversing changes made to e12deb302f74cb5bbc42f16f9b848fa93bb58d85. --- .../blocks/group/scene-kanban/CardContext.tsx | 2 +- .../blocks/group/scene-kanban/CardItem.tsx | 17 +--- .../components/editor-core/src/RenderRoot.tsx | 6 +- .../src/{Contexts.tsx => contexts.tsx} | 18 +++- libs/components/editor-core/src/hooks.ts | 20 ++--- libs/components/editor-core/src/index.ts | 3 +- .../editor-core/src/kanban/kanban.ts | 2 +- .../editor-core/src/recast-block/Context.tsx | 5 +- .../editor-core/src/recast-block/README.md | 19 ++++ .../editor-core/src/recast-block/group.ts | 4 +- .../editor-core/src/ref-page/ModalPage.tsx | 90 ------------------- .../editor-core/src/ref-page/index.ts | 1 - .../src/render-block/RenderBlock.tsx | 8 +- libs/components/ui/src/mui.ts | 5 -- libs/datasource/feature-flags/README.md | 13 +-- libs/datasource/feature-flags/src/config.ts | 14 --- 16 files changed, 63 insertions(+), 164 deletions(-) rename libs/components/editor-core/src/{Contexts.tsx => contexts.tsx} (70%) delete mode 100644 libs/components/editor-core/src/ref-page/ModalPage.tsx delete mode 100644 libs/components/editor-core/src/ref-page/index.ts diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx index f7f05b37d4..cb313d14ee 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx +++ b/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 +; }; diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index 76220d7ff0..f26374e4c3 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/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 ( - + - Add a sub-block + Add item ); diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index e4534b813d..1d08db0b16 100644 --- a/libs/components/editor-core/src/RenderRoot.tsx +++ b/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> = ({ }; return ( - + { @@ -183,7 +183,7 @@ export const RenderRoot: FC> = ({ {editor.isWhiteboard ? null : } {patchedNodes} - + ); }; diff --git a/libs/components/editor-core/src/Contexts.tsx b/libs/components/editor-core/src/contexts.tsx similarity index 70% rename from libs/components/editor-core/src/Contexts.tsx rename to libs/components/editor-core/src/contexts.tsx index 418fe0e8b4..cdd4dbf305 100644 --- a/libs/components/editor-core/src/Contexts.tsx +++ b/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(null as any); + +/** + * Context of column information + * + * @deprecated + */ +export const ColumnsContext = createContext<{ + fromId: string; + columns: Column[]; +}>({ + fromId: '', + columns: [], +}); diff --git a/libs/components/editor-core/src/hooks.ts b/libs/components/editor-core/src/hooks.ts index f0af8a0f87..d7d1a00cef 100644 --- a/libs/components/editor-core/src/hooks.ts +++ b/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(); 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 = ( 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 = ( * @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 () => { diff --git a/libs/components/editor-core/src/index.ts b/libs/components/editor-core/src/index.ts index bea2fed3a0..6cdd358058 100644 --- a/libs/components/editor-core/src/index.ts +++ b/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'; diff --git a/libs/components/editor-core/src/kanban/kanban.ts b/libs/components/editor-core/src/kanban/kanban.ts index 218476ac44..ff33b17f1d 100644 --- a/libs/components/editor-core/src/kanban/kanban.ts +++ b/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'; diff --git a/libs/components/editor-core/src/recast-block/Context.tsx b/libs/components/editor-core/src/recast-block/Context.tsx index 47ec6cfcdb..55d334039b 100644 --- a/libs/components/editor-core/src/recast-block/Context.tsx +++ b/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 ( - {children} + {children} ); }; @@ -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; diff --git a/libs/components/editor-core/src/recast-block/README.md b/libs/components/editor-core/src/recast-block/README.md index 489412eab3..59aed91be7 100644 --- a/libs/components/editor-core/src/recast-block/README.md +++ b/libs/components/editor-core/src/recast-block/README.md @@ -49,3 +49,22 @@ const SomeBlock = () => { return
...
; }; ``` + +## Scene + +**Notice: The scene API will refactor at next version.** + +```tsx +const SomeBlock = () => { + const { scene, setScene, setPage, setTable, setKanban } = + useRecastBlockScene(); + + return ( + <> +
Scene: {scene}
+ + + + ); +}; +``` diff --git a/libs/components/editor-core/src/recast-block/group.ts b/libs/components/editor-core/src/recast-block/group.ts index 9879ba43df..ae846fc238 100644 --- a/libs/components/editor-core/src/recast-block/group.ts +++ b/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); diff --git a/libs/components/editor-core/src/ref-page/ModalPage.tsx b/libs/components/editor-core/src/ref-page/ModalPage.tsx deleted file mode 100644 index 276d5984d6..0000000000 --- a/libs/components/editor-core/src/ref-page/ModalPage.tsx +++ /dev/null @@ -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( - - { - e.stopPropagation(); - }} - > - {children} - - , - - document.body - ); -}; - -const ModalPage = ({ blockId }: { blockId: string | null }) => { - const { editor } = useEditor(); - - return ( - - {blockId && } - - ); -}; - -const RefPageContext = createContext< - ReturnType> | undefined ->(undefined); - -export const RefPageProvider = ({ children }: { children: ReactNode }) => { - const state = useState(); - const [blockId, setBlockId] = state; - - return ( - - {children} - - - ); -}; - -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 = () => {}; diff --git a/libs/components/editor-core/src/ref-page/index.ts b/libs/components/editor-core/src/ref-page/index.ts deleted file mode 100644 index 4b06310a5c..0000000000 --- a/libs/components/editor-core/src/ref-page/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useRefPage, RefPageProvider } from './ModalPage'; diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index 74f6c659cf..46f068af2b 100644 --- a/libs/components/editor-core/src/render-block/RenderBlock.tsx +++ b/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 = ({ blockId, hasContainer = true, }) => { - const { editor, editorElement } = useEditor(); + const { editor, editorElement } = useContext(RootContext); const { block } = useBlock(blockId); const blockRef = useRef(null); diff --git a/libs/components/ui/src/mui.ts b/libs/components/ui/src/mui.ts index 47588ce5e6..b0658ad526 100644 --- a/libs/components/ui/src/mui.ts +++ b/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; diff --git a/libs/datasource/feature-flags/README.md b/libs/datasource/feature-flags/README.md index 7a04209c5d..f5c59f4e13 100644 --- a/libs/datasource/feature-flags/README.md +++ b/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 diff --git a/libs/datasource/feature-flags/src/config.ts b/libs/datasource/feature-flags/src/config.ts index 5295dae995..7f3360d6db 100644 --- a/libs/datasource/feature-flags/src/config.ts +++ b/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, - // }, - // ], };