From 4c882c13cce0692d456b9862aae772165a307a80 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Tue, 2 Aug 2022 19:09:24 +0800 Subject: [PATCH 01/15] feat: add sub page --- .../editor-core/src/sub-page/ModalPage.tsx | 88 +++++++++++++++++++ .../editor-core/src/sub-page/index.ts | 1 + 2 files changed, 89 insertions(+) create mode 100644 libs/components/editor-core/src/sub-page/ModalPage.tsx create mode 100644 libs/components/editor-core/src/sub-page/index.ts diff --git a/libs/components/editor-core/src/sub-page/ModalPage.tsx b/libs/components/editor-core/src/sub-page/ModalPage.tsx new file mode 100644 index 0000000000..72a7edee9b --- /dev/null +++ b/libs/components/editor-core/src/sub-page/ModalPage.tsx @@ -0,0 +1,88 @@ +import { RenderBlock } 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: '40px 50px', +}); + +const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { + const theme = useTheme(); + const { closeSubPage } = useSubPage(); + + return createPortal( + + { + e.stopPropagation(); + }} + > + {children} + + , + + document.body + ); +}; + +const ModalPage = ({ blockId }: { blockId: string }) => { + if (!blockId) { + return null; + } + return ( + + + + ); +}; + +const SubPageContext = createContext< + ReturnType> | undefined +>(undefined); + +export const SubPageProvider = ({ children }: { children: ReactNode }) => { + const state = useState(); + const [blockId, setBlockId] = state; + + return ( + + {children} + {blockId && } + + ); +}; + +export const useSubPage = () => { + const context = useContext(SubPageContext); + 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/sub-page/index.ts b/libs/components/editor-core/src/sub-page/index.ts new file mode 100644 index 0000000000..8dac937839 --- /dev/null +++ b/libs/components/editor-core/src/sub-page/index.ts @@ -0,0 +1 @@ +export { useSubPage, SubPageProvider } from './ModalPage'; From de510ba5ae48ea8fa49fcb9ac8f837a6eb9acb29 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Tue, 2 Aug 2022 19:10:01 +0800 Subject: [PATCH 02/15] chore: clean code --- libs/components/editor-core/src/index.ts | 2 ++ libs/components/editor-core/src/recast-block/Context.tsx | 5 +++-- libs/components/ui/src/mui.ts | 5 +++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/libs/components/editor-core/src/index.ts b/libs/components/editor-core/src/index.ts index 6cdd358058..72025bd68c 100644 --- a/libs/components/editor-core/src/index.ts +++ b/libs/components/editor-core/src/index.ts @@ -16,3 +16,5 @@ export * from './kanban/types'; export * from './utils'; export * from './editor'; + +export { SubPageProvider, useSubPage } from './sub-page'; diff --git a/libs/components/editor-core/src/recast-block/Context.tsx b/libs/components/editor-core/src/recast-block/Context.tsx index 55d334039b..c7bdfc11be 100644 --- a/libs/components/editor-core/src/recast-block/Context.tsx +++ b/libs/components/editor-core/src/recast-block/Context.tsx @@ -2,6 +2,7 @@ import { Protocol } from '@toeverything/datasource/db-service'; import { AsyncBlock } from '../editor'; import { ComponentType, createContext, ReactNode, useContext } from 'react'; import { RecastBlock } from './types'; +import { SubPageProvider } from '../sub-page'; /** * Determine whether the block supports RecastBlock @@ -47,7 +48,7 @@ export const RecastBlockProvider = ({ return ( - {children} + {children} ); }; @@ -60,7 +61,7 @@ export const useRecastBlock = () => { const recastBlock = useContext(RecastBlockContext); if (!recastBlock) { throw new Error( - 'Failed to find recastBlock! Please use the hook under `RecastTableProvider`.' + 'Failed to find recastBlock! Please use the hook under `RecastBlockProvider`.' ); } return recastBlock; diff --git a/libs/components/ui/src/mui.ts b/libs/components/ui/src/mui.ts index b0658ad526..47588ce5e6 100644 --- a/libs/components/ui/src/mui.ts +++ b/libs/components/ui/src/mui.ts @@ -13,6 +13,7 @@ import type { } from '@mui/material'; import { Avatar, + Backdrop, Box, Button, Checkbox, @@ -243,3 +244,7 @@ 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; From bac8c91497af7156ae50e29e41034f4706fbe0b9 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Tue, 2 Aug 2022 19:10:16 +0800 Subject: [PATCH 03/15] feat: kanban card open sub page --- .../src/blocks/group/scene-kanban/CardContext.tsx | 2 +- .../src/blocks/group/scene-kanban/CardItem.tsx | 13 +++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) 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 cb313d14ee..f7f05b37d4 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]); + }, [addCard, group]); 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 f26374e4c3..d4ce7e8486 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,5 +1,9 @@ import type { KanbanCard } from '@toeverything/components/editor-core'; -import { RenderBlock, useKanban } from '@toeverything/components/editor-core'; +import { + RenderBlock, + useKanban, + useSubPage, +} from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; const CardContent = styled('div')({ @@ -58,12 +62,17 @@ export const CardItem = ({ block: KanbanCard['block']; }) => { const { addSubItem } = useKanban(); + const { openSubPage } = useSubPage(); const onAddItem = async () => { await addSubItem(block); }; + const onClickCard = async () => { + openSubPage(id); + }; + return ( - + From c609d40f5af1d27910e0b038a7d2c8caf59f9e0b Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Tue, 2 Aug 2022 23:47:21 +0800 Subject: [PATCH 04/15] fix: import path --- libs/components/editor-core/src/sub-page/ModalPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/components/editor-core/src/sub-page/ModalPage.tsx b/libs/components/editor-core/src/sub-page/ModalPage.tsx index 72a7edee9b..ba5d5c1849 100644 --- a/libs/components/editor-core/src/sub-page/ModalPage.tsx +++ b/libs/components/editor-core/src/sub-page/ModalPage.tsx @@ -1,7 +1,7 @@ -import { RenderBlock } 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'; +import { RenderBlock } from '../render-block'; const Dialog = styled('div')({ flex: 1, From 974239bf9daa3d341b07c91a3d84cca932471ec0 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Wed, 3 Aug 2022 15:23:01 +0800 Subject: [PATCH 05/15] chore: rename to ref page --- .../src/blocks/group/scene-kanban/CardItem.tsx | 4 ++-- libs/components/editor-core/src/index.ts | 2 +- libs/components/editor-core/src/recast-block/Context.tsx | 4 ++-- .../editor-core/src/{sub-page => ref-page}/ModalPage.tsx | 6 +++--- libs/components/editor-core/src/ref-page/index.ts | 1 + libs/components/editor-core/src/sub-page/index.ts | 1 - 6 files changed, 9 insertions(+), 9 deletions(-) rename libs/components/editor-core/src/{sub-page => ref-page}/ModalPage.tsx (94%) create mode 100644 libs/components/editor-core/src/ref-page/index.ts delete mode 100644 libs/components/editor-core/src/sub-page/index.ts 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 d4ce7e8486..efdc96ef70 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 @@ -2,7 +2,7 @@ import type { KanbanCard } from '@toeverything/components/editor-core'; import { RenderBlock, useKanban, - useSubPage, + useRefPage, } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; @@ -62,7 +62,7 @@ export const CardItem = ({ block: KanbanCard['block']; }) => { const { addSubItem } = useKanban(); - const { openSubPage } = useSubPage(); + const { openSubPage } = useRefPage(); const onAddItem = async () => { await addSubItem(block); }; diff --git a/libs/components/editor-core/src/index.ts b/libs/components/editor-core/src/index.ts index 72025bd68c..70f87d3091 100644 --- a/libs/components/editor-core/src/index.ts +++ b/libs/components/editor-core/src/index.ts @@ -17,4 +17,4 @@ export * from './utils'; export * from './editor'; -export { SubPageProvider, useSubPage } from './sub-page'; +export { RefPageProvider, useRefPage } from './ref-page'; diff --git a/libs/components/editor-core/src/recast-block/Context.tsx b/libs/components/editor-core/src/recast-block/Context.tsx index c7bdfc11be..47ec6cfcdb 100644 --- a/libs/components/editor-core/src/recast-block/Context.tsx +++ b/libs/components/editor-core/src/recast-block/Context.tsx @@ -2,7 +2,7 @@ import { Protocol } from '@toeverything/datasource/db-service'; import { AsyncBlock } from '../editor'; import { ComponentType, createContext, ReactNode, useContext } from 'react'; import { RecastBlock } from './types'; -import { SubPageProvider } from '../sub-page'; +import { RefPageProvider } from '../ref-page'; /** * Determine whether the block supports RecastBlock @@ -48,7 +48,7 @@ export const RecastBlockProvider = ({ return ( - {children} + {children} ); }; diff --git a/libs/components/editor-core/src/sub-page/ModalPage.tsx b/libs/components/editor-core/src/ref-page/ModalPage.tsx similarity index 94% rename from libs/components/editor-core/src/sub-page/ModalPage.tsx rename to libs/components/editor-core/src/ref-page/ModalPage.tsx index ba5d5c1849..7d93db254c 100644 --- a/libs/components/editor-core/src/sub-page/ModalPage.tsx +++ b/libs/components/editor-core/src/ref-page/ModalPage.tsx @@ -15,7 +15,7 @@ const Dialog = styled('div')({ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { const theme = useTheme(); - const { closeSubPage } = useSubPage(); + const { closeSubPage } = useRefPage(); return createPortal( > | undefined >(undefined); -export const SubPageProvider = ({ children }: { children: ReactNode }) => { +export const RefPageProvider = ({ children }: { children: ReactNode }) => { const state = useState(); const [blockId, setBlockId] = state; @@ -67,7 +67,7 @@ export const SubPageProvider = ({ children }: { children: ReactNode }) => { ); }; -export const useSubPage = () => { +export const useRefPage = () => { const context = useContext(SubPageContext); if (!context) { throw new Error( diff --git a/libs/components/editor-core/src/ref-page/index.ts b/libs/components/editor-core/src/ref-page/index.ts new file mode 100644 index 0000000000..4b06310a5c --- /dev/null +++ b/libs/components/editor-core/src/ref-page/index.ts @@ -0,0 +1 @@ +export { useRefPage, RefPageProvider } from './ModalPage'; diff --git a/libs/components/editor-core/src/sub-page/index.ts b/libs/components/editor-core/src/sub-page/index.ts deleted file mode 100644 index 8dac937839..0000000000 --- a/libs/components/editor-core/src/sub-page/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useSubPage, SubPageProvider } from './ModalPage'; From 0709b5557cbad3adfe64427705079dec0f3407a1 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 15:31:00 +0800 Subject: [PATCH 06/15] refactor: switch to useEditor --- libs/components/editor-core/src/RenderRoot.tsx | 6 +++--- libs/components/editor-core/src/contexts.tsx | 18 +++--------------- libs/components/editor-core/src/hooks.ts | 16 ++++++++-------- libs/components/editor-core/src/index.ts | 1 - .../editor-core/src/kanban/kanban.ts | 2 +- .../src/render-block/RenderBlock.tsx | 8 ++++---- 6 files changed, 19 insertions(+), 32 deletions(-) diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index aed9ebea50..f7a3638818 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 { RootContext } from './contexts'; +import { EditorProvider } 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 index cdd4dbf305..418fe0e8b4 100644 --- a/libs/components/editor-core/src/contexts.tsx +++ b/libs/components/editor-core/src/contexts.tsx @@ -1,9 +1,8 @@ import { createContext, useContext } from 'react'; import type { BlockEditor, AsyncBlock } from './editor'; -import type { Column } from '@toeverything/datasource/db-service'; import { genErrorObj } from '@toeverything/utils'; -export const RootContext = createContext<{ +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; @@ -14,6 +13,8 @@ export const RootContext = createContext<{ ) as any ); +export const EditorProvider = RootContext.Provider; + export const useEditor = () => { return useContext(RootContext); }; @@ -22,16 +23,3 @@ 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 d7d1a00cef..948cc4a156 100644 --- a/libs/components/editor-core/src/hooks.ts +++ b/libs/components/editor-core/src/hooks.ts @@ -7,7 +7,7 @@ import { } from './editor'; import { noop, Point } from '@toeverything/utils'; import { useCallback, useContext, useEffect, useRef, useState } from 'react'; -import { RootContext } from './contexts'; +import { useEditor } 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 } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { if (!blockId) { return undefined; @@ -95,7 +95,7 @@ export const useOnSelect = ( blockId: string, cb: (isSelect: boolean) => void ) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); 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 } = useContext(RootContext); + const { editor } = useEditor(); 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 } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { editor.selectionManager.observe( blockId, @@ -162,7 +162,7 @@ export const useOnSelectSetSelection = ( * @export */ export const useOnSelectChange = (cb: (info: SelectionInfo) => void) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); 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 } = useContext(RootContext); + const { editor } = useEditor(); useEffect(() => { editor.selectionManager.onSelectEnd(cb); return () => { @@ -195,7 +195,7 @@ export const useOnSelectStartWith = ( blockId: string, cb: (args: MouseEvent) => void ) => { - const { editor } = useContext(RootContext); + const { editor } = useEditor(); 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 70f87d3091..bea2fed3a0 100644 --- a/libs/components/editor-core/src/index.ts +++ b/libs/components/editor-core/src/index.ts @@ -1,4 +1,3 @@ -export { ColumnsContext, RootContext } from './contexts'; export { RenderRoot, MIN_PAGE_WIDTH } from './RenderRoot'; export * from './render-block'; export * from './hooks'; diff --git a/libs/components/editor-core/src/kanban/kanban.ts b/libs/components/editor-core/src/kanban/kanban.ts index ff33b17f1d..218476ac44 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/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index 46f068af2b..74f6c659cf 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, Theme } from '@toeverything/components/ui'; -import { FC, useContext, useLayoutEffect, useMemo, useRef } from 'react'; +import { styled } from '@toeverything/components/ui'; +import { FC, useLayoutEffect, useMemo, useRef } from 'react'; // import { RenderChildren } from './RenderChildren'; -import { RootContext } from '../contexts'; +import { useEditor } from '../Contexts'; import { useBlock } from '../hooks'; interface RenderBlockProps { @@ -14,7 +14,7 @@ export const RenderBlock: FC = ({ blockId, hasContainer = true, }) => { - const { editor, editorElement } = useContext(RootContext); + const { editor, editorElement } = useEditor(); const { block } = useBlock(blockId); const blockRef = useRef(null); From 93f7ebf5c982ad3bb437d8141f5963b55ce22366 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 16:24:52 +0800 Subject: [PATCH 07/15] chore: update modal --- .../editor-core/src/ref-page/ModalPage.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/libs/components/editor-core/src/ref-page/ModalPage.tsx b/libs/components/editor-core/src/ref-page/ModalPage.tsx index 7d93db254c..7fce8cf5d8 100644 --- a/libs/components/editor-core/src/ref-page/ModalPage.tsx +++ b/libs/components/editor-core/src/ref-page/ModalPage.tsx @@ -1,6 +1,7 @@ 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')({ @@ -10,7 +11,7 @@ const Dialog = styled('div')({ background: '#fff', boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', borderRadius: '10px', - padding: '40px 50px', + padding: '72px 120px', }); const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { @@ -40,18 +41,17 @@ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { ); }; -const ModalPage = ({ blockId }: { blockId: string }) => { - if (!blockId) { - return null; - } +const ModalPage = ({ blockId }: { blockId: string | null }) => { + const { editor } = useEditor(); + return ( - - + + {blockId && } ); }; -const SubPageContext = createContext< +const RefPageContext = createContext< ReturnType> | undefined >(undefined); @@ -60,15 +60,15 @@ export const RefPageProvider = ({ children }: { children: ReactNode }) => { const [blockId, setBlockId] = state; return ( - + {children} - {blockId && } - + + ); }; export const useRefPage = () => { - const context = useContext(SubPageContext); + const context = useContext(RefPageContext); if (!context) { throw new Error( 'Wrap your app inside of a `SubPageProvider` to have access to the hook context!' From 42c943f904c2844def690853446651596ca9a70f Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 16:25:04 +0800 Subject: [PATCH 08/15] chore: clean code --- .../editor-core/src/recast-block/README.md | 19 ------------------- .../editor-core/src/recast-block/group.ts | 4 ++-- 2 files changed, 2 insertions(+), 21 deletions(-) diff --git a/libs/components/editor-core/src/recast-block/README.md b/libs/components/editor-core/src/recast-block/README.md index 59aed91be7..489412eab3 100644 --- a/libs/components/editor-core/src/recast-block/README.md +++ b/libs/components/editor-core/src/recast-block/README.md @@ -49,22 +49,3 @@ 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 b8b25cce01..1b79612754 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 RecastBlock[])); + await mergeGroupProperties(...(groups as unknown as RecastBlock[])); const [headGroup, ...restGroups] = groups; // Add all children to the head group @@ -174,7 +174,7 @@ export const splitGroup = async ( } splitGroupProperties( - group as RecastBlock, + group as unknown as RecastBlock, newGroupBlock as unknown as RecastBlock ); await group.after(newGroupBlock); From 07cf74d52f162addef85244df1a70a1375abc0ca Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 18:13:29 +0800 Subject: [PATCH 09/15] fix: feature flag offline mode --- libs/datasource/feature-flags/README.md | 13 +++++++++++-- libs/datasource/feature-flags/src/config.ts | 1 + 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/libs/datasource/feature-flags/README.md b/libs/datasource/feature-flags/README.md index f5c59f4e13..7a04209c5d 100644 --- a/libs/datasource/feature-flags/README.md +++ b/libs/datasource/feature-flags/README.md @@ -2,7 +2,15 @@ ## Usage -- set provider +- 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 ```tsx import { FeatureFlagsProvider } from '@toeverything/datasource/feature-flags'; @@ -42,7 +50,8 @@ const App = () => { **When entering development mode feature flag will NOT be updated in real time** -- `activateFfcDevMode()` play with feature flags locally +- `activateFfcDevMode(PASSWORD)` play with feature flags locally + - The `devModePassword` can be obtained from `src/config.ts` - `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 7f3360d6db..b89a2e7359 100644 --- a/libs/datasource/feature-flags/src/config.ts +++ b/libs/datasource/feature-flags/src/config.ts @@ -8,4 +8,5 @@ export const config: IOption = { // id: 'the user's unique identifier' // } devModePassword: '-', + enableDataSync: !!process.env['AFFINE_FEATURE_FLAG_TOKEN'], }; From 4a7c6be8a0ba30d1debc256b36faa0a67af4be23 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 18:29:26 +0800 Subject: [PATCH 10/15] chore: add example feature flag bootstrap --- libs/datasource/feature-flags/src/config.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/libs/datasource/feature-flags/src/config.ts b/libs/datasource/feature-flags/src/config.ts index b89a2e7359..5295dae995 100644 --- a/libs/datasource/feature-flags/src/config.ts +++ b/libs/datasource/feature-flags/src/config.ts @@ -9,4 +9,17 @@ export const config: IOption = { // } 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, + // }, + // ], }; From 612ee4926dd06ca758e984d646c6e8445c2d49f5 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 18:30:41 +0800 Subject: [PATCH 11/15] chore: add kanban card ref page flag --- .../editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 efdc96ef70..0b1730ba0d 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 @@ -5,6 +5,7 @@ import { useRefPage, } 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,12 +64,13 @@ export const CardItem = ({ }) => { const { addSubItem } = useKanban(); const { openSubPage } = useRefPage(); + const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false); const onAddItem = async () => { await addSubItem(block); }; const onClickCard = async () => { - openSubPage(id); + showKanbanRefPageFlag && openSubPage(id); }; return ( From f0678e1effc39c1a2e594a5b05f2e0b1ca1dc93e Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 18:45:21 +0800 Subject: [PATCH 12/15] chore: tweak style --- libs/components/editor-core/src/ref-page/ModalPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/components/editor-core/src/ref-page/ModalPage.tsx b/libs/components/editor-core/src/ref-page/ModalPage.tsx index 7fce8cf5d8..0fb1b732f0 100644 --- a/libs/components/editor-core/src/ref-page/ModalPage.tsx +++ b/libs/components/editor-core/src/ref-page/ModalPage.tsx @@ -24,6 +24,7 @@ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { style={{ display: 'flex', flexDirection: 'column', + background: 'rgba(58, 76, 92, 0.4)', zIndex: theme.affine.zIndex.popover, }} onClick={closeSubPage} From bd15d2d674de0e6358e9f9ca9e223a8ba4879db7 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Thu, 4 Aug 2022 22:56:29 +0800 Subject: [PATCH 13/15] fix: ci --- .../editor-core/src/{contexts.tsx => Contexts.tsx} | 0 libs/components/editor-core/src/hooks.ts | 6 +++--- 2 files changed, 3 insertions(+), 3 deletions(-) rename libs/components/editor-core/src/{contexts.tsx => Contexts.tsx} (100%) diff --git a/libs/components/editor-core/src/contexts.tsx b/libs/components/editor-core/src/Contexts.tsx similarity index 100% rename from libs/components/editor-core/src/contexts.tsx rename to libs/components/editor-core/src/Contexts.tsx diff --git a/libs/components/editor-core/src/hooks.ts b/libs/components/editor-core/src/hooks.ts index 948cc4a156..f0af8a0f87 100644 --- a/libs/components/editor-core/src/hooks.ts +++ b/libs/components/editor-core/src/hooks.ts @@ -1,3 +1,6 @@ +import { noop, Point } from '@toeverything/utils'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { useEditor } from './Contexts'; import { AsyncBlock, BlockEditor, @@ -5,9 +8,6 @@ import { SelectionInfo, SelectionSettingsMap, } from './editor'; -import { noop, Point } from '@toeverything/utils'; -import { useCallback, useContext, useEffect, useRef, useState } from 'react'; -import { useEditor } from './Contexts'; function useRequestReRender() { const [, setUpdateCounter] = useState(0); From a4013d737846134574cd9bdadf76c7369b59719a Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 5 Aug 2022 15:43:53 +0800 Subject: [PATCH 14/15] chore: add overflow scroll --- libs/components/editor-core/src/ref-page/ModalPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/components/editor-core/src/ref-page/ModalPage.tsx b/libs/components/editor-core/src/ref-page/ModalPage.tsx index 0fb1b732f0..276d5984d6 100644 --- a/libs/components/editor-core/src/ref-page/ModalPage.tsx +++ b/libs/components/editor-core/src/ref-page/ModalPage.tsx @@ -12,6 +12,7 @@ const Dialog = styled('div')({ 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 }) => { From 8102c24f14093ab7092bc70a879a757d5aad76ce Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 5 Aug 2022 16:35:26 +0800 Subject: [PATCH 15/15] chore: update text --- .../editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0b1730ba0d..76220d7ff0 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 @@ -80,7 +80,7 @@ export const CardItem = ({ - Add item + Add a sub-block );