From 12afd6be681c05112174548996e84f93327d9150 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 26 Aug 2022 19:50:17 +0800 Subject: [PATCH 1/7] refactor: remove useBlockRender --- .../src/blocks/grid-item/GridItemRender.tsx | 11 ++--------- .../components/editor-blocks/src/blocks/grid/Grid.tsx | 3 +-- .../editor-core/src/render-block/Context.tsx | 9 +++++++-- .../editor-core/src/render-block/RenderBlock.tsx | 5 +++-- .../src/render-block/RenderBlockChildren.tsx | 3 +-- .../src/render-block/WithTreeViewChildren.tsx | 3 +-- libs/components/editor-core/src/render-block/index.ts | 2 +- 7 files changed, 16 insertions(+), 20 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx index 1dece91699..620a25dba6 100644 --- a/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx +++ b/libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx @@ -1,4 +1,4 @@ -import { useBlockRender } from '@toeverything/components/editor-core'; +import { RenderBlockChildren } from '@toeverything/components/editor-core'; import { ChildrenView, CreateView } from '@toeverything/framework/virgo'; export const GridItemRender = function ( @@ -6,14 +6,7 @@ export const GridItemRender = function ( ) { const GridItem = function (props: CreateView) { const { block } = props; - const { BlockRender } = useBlockRender(); - const children = ( - <> - {block.childrenIds.map(id => { - return ; - })} - - ); + const children = ; return <>{creator({ ...props, children })}; }; return GridItem; diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx index 4b5bfd49b3..a8e69125d0 100644 --- a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx +++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx @@ -1,4 +1,4 @@ -import { useBlockRender } from '@toeverything/components/editor-core'; +import { BlockRender } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; import { Protocol } from '@toeverything/datasource/db-service'; import { CreateView } from '@toeverything/framework/virgo'; @@ -31,7 +31,6 @@ export const Grid = function (props: CreateView) { const originalLeftWidth = useRef(gridItemMinWidth); const originalRightWidth = useRef(gridItemMinWidth); const [alertHandleId, setAlertHandleId] = useState(null); - const { BlockRender } = useBlockRender(); const getLeftRightGridItemDomByIndex = (index: number) => { const gridItems = Array.from(gridContainerRef.current?.children).filter( diff --git a/libs/components/editor-core/src/render-block/Context.tsx b/libs/components/editor-core/src/render-block/Context.tsx index 90c89eec0e..d34f5d6801 100644 --- a/libs/components/editor-core/src/render-block/Context.tsx +++ b/libs/components/editor-core/src/render-block/Context.tsx @@ -3,7 +3,7 @@ import { createContext, PropsWithChildren, useContext } from 'react'; import { RenderBlockProps } from './RenderBlock'; type BlockRenderProps = { - blockRender: (args: RenderBlockProps) => JSX.Element | null; + blockRender: (args: RenderBlockProps) => JSX.Element; }; export const BlockRenderContext = createContext( @@ -27,9 +27,14 @@ export const BlockRenderProvider = ({ ); }; -export const useBlockRender = () => { +const useBlockRender = () => { const { blockRender } = useContext(BlockRenderContext); return { BlockRender: blockRender, }; }; + +export const BlockRender = (props: RenderBlockProps) => { + const { BlockRender } = useBlockRender(); + return ; +}; diff --git a/libs/components/editor-core/src/render-block/RenderBlock.tsx b/libs/components/editor-core/src/render-block/RenderBlock.tsx index c843274166..a7ebc53789 100644 --- a/libs/components/editor-core/src/render-block/RenderBlock.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlock.tsx @@ -7,7 +7,8 @@ import { useBlock } from '../hooks'; /** * Render nothing */ -export const NullBlockRender = (): null => null; +// eslint-disable-next-line react/jsx-no-useless-fragment +export const NullBlockRender = () => <>; export interface RenderBlockProps { blockId: string; @@ -22,7 +23,7 @@ export function RenderBlock({ const { block } = useBlock(blockId); const setRef = useCallback( - (dom: HTMLElement) => { + (dom: HTMLElement | null) => { if (block != null && dom != null) { block.dom = dom; } diff --git a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx index d79d0cd002..3ff9892949 100644 --- a/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx +++ b/libs/components/editor-core/src/render-block/RenderBlockChildren.tsx @@ -1,6 +1,6 @@ import { styled } from '@toeverything/components/ui'; import type { AsyncBlock } from '../editor'; -import { useBlockRender } from './Context'; +import { BlockRender } from './Context'; import { NullBlockRender } from './RenderBlock'; export interface RenderChildrenProps { @@ -12,7 +12,6 @@ export const RenderBlockChildren = ({ block, indent = true, }: RenderChildrenProps) => { - const { BlockRender } = useBlockRender(); if (BlockRender === NullBlockRender) { return null; } diff --git a/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx b/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx index 8c3642ef6d..6dccd49ace 100644 --- a/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx +++ b/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx @@ -7,7 +7,7 @@ import type { } from 'react'; import { forwardRef } from 'react'; import { CreateView } from '../editor'; -import { useBlockRender } from './Context'; +import { BlockRender } from './Context'; import { NullBlockRender } from './RenderBlock'; type WithChildrenConfig = { @@ -60,7 +60,6 @@ export const withTreeViewChildren = ( return (props: CreateView) => { const { block } = props; - const { BlockRender } = useBlockRender(); const collapsed = block.getProperty('collapsed')?.value; const childrenIds = block.childrenIds; const showChildren = diff --git a/libs/components/editor-core/src/render-block/index.ts b/libs/components/editor-core/src/render-block/index.ts index 5d3c6d122e..bc071cf5a2 100644 --- a/libs/components/editor-core/src/render-block/index.ts +++ b/libs/components/editor-core/src/render-block/index.ts @@ -1,4 +1,4 @@ -export { BlockRenderProvider, useBlockRender } from './Context'; +export { BlockRender, BlockRenderProvider } from './Context'; export { NullBlockRender, RenderBlock } from './RenderBlock'; export { RenderBlockChildren } from './RenderBlockChildren'; export { KanbanBlockRender } from './RenderKanbanBlock'; From 374d9d94efb4d39374d1221679c28d7655f9f389 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Fri, 26 Aug 2022 19:51:33 +0800 Subject: [PATCH 2/7] chore: clean styles --- .../src/blocks/group/GroupView.tsx | 21 +++++++------------ .../blocks/group/group-menu/AddViewMenu.tsx | 2 +- .../src/blocks/group/group-menu/ViewsMenu.tsx | 4 ++-- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx index 791059e36c..f0d6e56cc5 100644 --- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx +++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx @@ -21,19 +21,6 @@ const SceneMap: Record> = { kanban: SceneKanban, } as const; -const GroupBox = styled('div')(({ theme }) => { - return { - '&:hover': { - // Workaround referring to other components - // See https://emotion.sh/docs/styled#targeting-another-emotion-component - // [GroupActionWrapper.toString()]: {}, - '& > *': { - visibility: 'visible', - }, - }, - }; -}); - const GroupActionWrapper = styled('div')(({ theme }) => ({ height: '30px', display: 'flex', @@ -59,6 +46,14 @@ const GroupActionWrapper = styled('div')(({ theme }) => ({ }, })); +const GroupBox = styled('div')({ + '&:hover': { + [GroupActionWrapper.toString()]: { + visibility: 'visible', + }, + }, +}); + const GroupContainer = styled('div')<{ isSelect?: boolean }>( ({ isSelect, theme }) => ({ background: theme.affine.palette.white, diff --git a/libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx b/libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx index a376785b52..cffa0a0dd0 100644 --- a/libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx +++ b/libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx @@ -41,7 +41,7 @@ export const AddViewMenu = () => { onClick={() => setActivePanel(!activePanel)} > - Add View + Add View {activePanel && ( diff --git a/libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx b/libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx index 1fee99465e..9e6a70df24 100644 --- a/libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx +++ b/libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx @@ -20,7 +20,7 @@ export const ViewsMenu = () => { useRecastView(); const handleChange = (e: ChangeEvent) => { - setViewName(e.target.value.trim()); + setViewName(e.target.value); }; const handleKeyDown = (event: KeyboardEvent) => { @@ -36,7 +36,7 @@ export const ViewsMenu = () => { } await updateView({ ...activeView, - name: viewName, + name: viewName.trim(), type: viewType, }); setActiveView(null); From aac9eee6e29c4c6e19a5d496eb438e332419c9a4 Mon Sep 17 00:00:00 2001 From: tzhangchi Date: Fri, 26 Aug 2022 21:53:45 +0800 Subject: [PATCH 3/7] feat(toc): add scroll active item --- .../src/pages/workspace/docs/components/toc/TOC.tsx | 7 ++++++- .../src/pages/workspace/docs/components/toc/toc.css | 13 +++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx index 6e416a8b6b..877a17d480 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx @@ -16,8 +16,8 @@ import { getContentByAsyncBlocks, getPageTOC, } from './toc-util'; +import './toc.css'; import type { ListenerMap, TOCType } from './types'; - const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>( ({ type, isActive }) => { const common = { @@ -168,6 +168,11 @@ export const TOC = () => { const onClick = async (blockId?: string) => { setActiveBlockId(blockId); + const block = await editor.getBlockById(blockId); + block.dom.classList.add('toc-scroll-item'); + setTimeout(() => { + block.dom.classList.remove('toc-scroll-item'); + }, 1000); await editor.scrollManager.scrollIntoViewByBlockId(blockId); }; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css new file mode 100644 index 0000000000..44364012dc --- /dev/null +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css @@ -0,0 +1,13 @@ +.toc-scroll-item { + animation: blinker 1s linear; + animation-delay: 1s; +} + +@keyframes blinker { + 0% { + background: rgba(152, 172, 189, 0.1); + } + 100% { + background: rgba(152, 172, 189, 0.1); + } +} From c0a41074497e2282113054e50e27e42ba05c0ea6 Mon Sep 17 00:00:00 2001 From: tzhangchi Date: Mon, 29 Aug 2022 12:02:32 +0800 Subject: [PATCH 4/7] feat(toc): add animation to toc item --- .../workspace/docs/components/toc/TOC.tsx | 20 ++++++++++++++++--- .../workspace/docs/components/toc/toc.css | 13 ------------ 2 files changed, 17 insertions(+), 16 deletions(-) delete mode 100644 apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx index 877a17d480..3e9eb11d4a 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx @@ -1,3 +1,4 @@ +import { keyframes } from '@emotion/react'; import type { Virgo } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; import { useCurrentEditors } from '@toeverything/datasource/state'; @@ -16,8 +17,21 @@ import { getContentByAsyncBlocks, getPageTOC, } from './toc-util'; -import './toc.css'; import type { ListenerMap, TOCType } from './types'; +// import './toc.css'; +const blinker = keyframes` +0% { + background: rgba(152, 172, 189, 0.1); +} +100% { + background: rgba(152, 172, 189, 0.1); +} +`; +const toScrollItem = styled('div')` + animation: ${blinker} 1s linear; + animation-delay: 1s; +`; +const toScrollItemClassName = toScrollItem.toString().substring(1); const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>( ({ type, isActive }) => { const common = { @@ -169,9 +183,9 @@ export const TOC = () => { const onClick = async (blockId?: string) => { setActiveBlockId(blockId); const block = await editor.getBlockById(blockId); - block.dom.classList.add('toc-scroll-item'); + block.dom.classList.add(toScrollItemClassName); setTimeout(() => { - block.dom.classList.remove('toc-scroll-item'); + block.dom.classList.remove(toScrollItemClassName); }, 1000); await editor.scrollManager.scrollIntoViewByBlockId(blockId); }; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css deleted file mode 100644 index 44364012dc..0000000000 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/toc.css +++ /dev/null @@ -1,13 +0,0 @@ -.toc-scroll-item { - animation: blinker 1s linear; - animation-delay: 1s; -} - -@keyframes blinker { - 0% { - background: rgba(152, 172, 189, 0.1); - } - 100% { - background: rgba(152, 172, 189, 0.1); - } -} From fd4f99bd83a1c70846a88f67fd147419eeeb609b Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Mon, 29 Aug 2022 13:30:56 +0800 Subject: [PATCH 5/7] refactor: use web animate api --- .../workspace/docs/components/toc/TOC.tsx | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx index 3e9eb11d4a..0a5c442590 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx @@ -1,6 +1,6 @@ -import { keyframes } from '@emotion/react'; import type { Virgo } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; +import { Protocol } from '@toeverything/datasource/db-service'; import { useCurrentEditors } from '@toeverything/datasource/state'; import { createContext, @@ -18,20 +18,7 @@ import { getPageTOC, } from './toc-util'; import type { ListenerMap, TOCType } from './types'; -// import './toc.css'; -const blinker = keyframes` -0% { - background: rgba(152, 172, 189, 0.1); -} -100% { - background: rgba(152, 172, 189, 0.1); -} -`; -const toScrollItem = styled('div')` - animation: ${blinker} 1s linear; - animation-delay: 1s; -`; -const toScrollItemClassName = toScrollItem.toString().substring(1); + const StyledTOCItem = styled('a')<{ type?: string; isActive?: boolean }>( ({ type, isActive }) => { const common = { @@ -183,11 +170,28 @@ export const TOC = () => { const onClick = async (blockId?: string) => { setActiveBlockId(blockId); const block = await editor.getBlockById(blockId); - block.dom.classList.add(toScrollItemClassName); - setTimeout(() => { - block.dom.classList.remove(toScrollItemClassName); - }, 1000); await editor.scrollManager.scrollIntoViewByBlockId(blockId); + + if (!block || block.type === Protocol.Block.Type.group) { + // the group block has its own background + return; + } + // See https://developer.mozilla.org/en-US/docs/Web/API/Element/animate + block.dom?.animate( + [ + { + backgroundColor: 'rgba(152, 172, 189, 0.1)', + }, + { + backgroundColor: 'rgba(152, 172, 189, 0)', + }, + ], + { + delay: 500, + duration: 700, + easing: 'linear', + } + ); }; return ( From 2f1162022161910c046e978a9b9083dc5a7b8646 Mon Sep 17 00:00:00 2001 From: Whitewater Date: Mon, 29 Aug 2022 16:25:30 +0800 Subject: [PATCH 6/7] fix: kanban tree view (#342) --- libs/components/editor-core/src/render-block/Context.tsx | 2 +- .../editor-core/src/render-block/WithTreeViewChildren.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/libs/components/editor-core/src/render-block/Context.tsx b/libs/components/editor-core/src/render-block/Context.tsx index d34f5d6801..e5c0197eee 100644 --- a/libs/components/editor-core/src/render-block/Context.tsx +++ b/libs/components/editor-core/src/render-block/Context.tsx @@ -27,7 +27,7 @@ export const BlockRenderProvider = ({ ); }; -const useBlockRender = () => { +export const useBlockRender = () => { const { blockRender } = useContext(BlockRenderContext); return { BlockRender: blockRender, diff --git a/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx b/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx index 6dccd49ace..8c3642ef6d 100644 --- a/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx +++ b/libs/components/editor-core/src/render-block/WithTreeViewChildren.tsx @@ -7,7 +7,7 @@ import type { } from 'react'; import { forwardRef } from 'react'; import { CreateView } from '../editor'; -import { BlockRender } from './Context'; +import { useBlockRender } from './Context'; import { NullBlockRender } from './RenderBlock'; type WithChildrenConfig = { @@ -60,6 +60,7 @@ export const withTreeViewChildren = ( return (props: CreateView) => { const { block } = props; + const { BlockRender } = useBlockRender(); const collapsed = block.getProperty('collapsed')?.value; const childrenIds = block.childrenIds; const showChildren = From 3c79d6694637ef1427f1e9a31d922c616ae863fe Mon Sep 17 00:00:00 2001 From: Whitewater Date: Mon, 29 Aug 2022 18:23:33 +0800 Subject: [PATCH 7/7] fix: disable ref page selection (#343) --- .../editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx index 3d223d121d..34d6dbb583 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx @@ -21,13 +21,17 @@ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { return createPortal( void }) => { + // Prevent trigger the bottom editor's selection + e.stopPropagation(); + }} + onClick={closeSubPage} style={{ display: 'flex', flexDirection: 'column', background: 'rgba(58, 76, 92, 0.4)', zIndex: theme.affine.zIndex.popover, }} - onClick={closeSubPage} > void }) => {