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..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,5 +1,6 @@ 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, @@ -168,7 +169,29 @@ export const TOC = () => { const onClick = async (blockId?: string) => { setActiveBlockId(blockId); + const block = await editor.getBlockById(blockId); 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 ( 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-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); 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 }) => { diff --git a/libs/components/editor-core/src/render-block/Context.tsx b/libs/components/editor-core/src/render-block/Context.tsx index 90c89eec0e..e5c0197eee 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( @@ -33,3 +33,8 @@ export const useBlockRender = () => { 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/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';