Merge branch 'toeverything:develop' into dev

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 (

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 = <RenderBlockChildren block={block} indent={false} />;
-        const children = (
-            <>
-                {block.childrenIds.map(id => {
-                    return <BlockRender key={id} blockId={id} />;
-                })}
-            </>
-        );
         return <>{creator({ ...props, children })}</>;
     };
     return GridItem;

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<number>(gridItemMinWidth);
     const originalRightWidth = useRef<number>(gridItemMinWidth);
     const [alertHandleId, setAlertHandleId] = useState<string>(null);
-    const { BlockRender } = useBlockRender();
 
     const getLeftRightGridItemDomByIndex = (index: number) => {
         const gridItems = Array.from(gridContainerRef.current?.children).filter(

libs/components/editor-blocks/src/blocks/group/GroupView.tsx

@@ -21,19 +21,6 @@ const SceneMap: Record<RecastScene, ComponentType<CreateView>> = {
     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,

libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx

@@ -41,7 +41,7 @@ export const AddViewMenu = () => {
                 onClick={() => setActivePanel(!activePanel)}
             >
                 <AddViewIcon fontSize="small" />
-                <span>Add View</span>
+                <span style={{ userSelect: 'none' }}>Add View</span>
                 {activePanel && (
                     <Panel>
                         <PanelItem>

libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx

@@ -20,7 +20,7 @@ export const ViewsMenu = () => {
         useRecastView();
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setViewName(e.target.value.trim());
+        setViewName(e.target.value);
     };
 
     const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -36,7 +36,7 @@ export const ViewsMenu = () => {
         }
         await updateView({
             ...activeView,
-            name: viewName,
+            name: viewName.trim(),
             type: viewType,
         });
         setActiveView(null);

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(
         <MuiBackdrop
             open={open}
+            onMouseDown={(e: { stopPropagation: () => 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}
         >
             <Dialog
                 onClick={(e: { stopPropagation: () => void }) => {

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<BlockRenderProps>(
@@ -33,3 +33,8 @@ export const useBlockRender = () => {
         BlockRender: blockRender,
     };
 };
+
+export const BlockRender = (props: RenderBlockProps) => {
+    const { BlockRender } = useBlockRender();
+    return <BlockRender {...props} />;
+};

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;
             }

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;
     }

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';