feat(editor): focus block when click on space

libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx

@@ -188,7 +188,7 @@ export const BulletView = ({ block, editor }: CreateView) => {
 
     return (
         <BlockContainer editor={editor} block={block} selected={isSelect}>
-            <BlockPendantProvider block={block}>
+            <BlockPendantProvider editor={editor} block={block}>
                 <List>
                     <BulletLeft>
                         <BulletIcon numberType={properties.numberType} />

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -170,7 +170,7 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
         editor.selectionManager.activePreviousNode(block.id, 'start');
     };
     return (
-        <BlockPendantProvider block={block}>
+        <BlockPendantProvider editor={editor} block={block}>
             <CodeBlock
                 onKeyDown={e => {
                     e.stopPropagation();
@@ -198,7 +198,8 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
                     </div>
                     <div>
                         <div className="copy-block" onClick={copyCode}>
-                            <DuplicateIcon></DuplicateIcon>Copy
+                            <DuplicateIcon />
+                            Copy
                         </div>
                     </div>
                 </div>

libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx

@@ -33,7 +33,7 @@ export const EmbedLinkView = (props: EmbedLinkView) => {
     };
 
     return (
-        <BlockPendantProvider block={block}>
+        <BlockPendantProvider editor={editor} block={block}>
             <LinkContainer>
                 {embedLinkUrl ? (
                     <SourceView

libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx

@@ -1,13 +1,12 @@
-import { useState } from 'react';
-import { CreateView } from '@toeverything/framework/virgo';
 import {
-    useOnSelect,
     BlockPendantProvider,
+    useOnSelect,
 } from '@toeverything/components/editor-core';
-import { Upload } from '../../components/upload/upload';
+import { CreateView } from '@toeverything/framework/virgo';
+import { useState } from 'react';
 import { SourceView } from '../../components/source-view';
-import { styled } from '@toeverything/components/ui';
 import { LinkContainer } from '../../components/style-container';
+import { Upload } from '../../components/upload/upload';
 
 const MESSAGES = {
     ADD_FIGMA_LINK: 'Add figma link',
@@ -30,7 +29,7 @@ export const FigmaView = ({ block, editor }: FigmaView) => {
         setIsSelect(isSelect);
     });
     return (
-        <BlockPendantProvider block={block}>
+        <BlockPendantProvider editor={editor} block={block}>
             <LinkContainer>
                 {figmaUrl ? (
                     <SourceView

libs/components/editor-blocks/src/blocks/image/ImageView.tsx

@@ -165,12 +165,10 @@ export const ImageView = ({ block, editor }: ImageView) => {
     };
 
     return (
-        <BlockPendantProvider block={block}>
+        <BlockPendantProvider editor={editor} block={block}>
             <ImageBlock>
                 <div style={{ position: 'relative' }} ref={resizeBox}>
-                    {!isSelect ? (
+                    {!isSelect ? <ImageShade onClick={handleClick} /> : null}
-                        <ImageShade onClick={handleClick}></ImageShade>
-                    ) : null}
                     {imgUrl ? (
                         <div
                             onMouseDown={e => {

libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx

@@ -183,7 +183,7 @@ export const NumberedView = ({ block, editor }: CreateView) => {
 
     return (
         <BlockContainer editor={editor} block={block} selected={isSelect}>
-            <BlockPendantProvider block={block}>
+            <BlockPendantProvider editor={editor} block={block}>
                 <List>
                     <div className={'checkBoxContainer'}>
                         {getNumber(properties.numberType, number)}.

libs/components/editor-blocks/src/blocks/page/PageView.tsx

@@ -1,14 +1,14 @@
-import { useRef, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 
 import { BackLink, TextProps } from '@toeverything/components/common';
 import {
-    RenderBlockChildren,
     BlockPendantProvider,
+    RenderBlockChildren,
 } from '@toeverything/components/editor-core';
+import { styled } from '@toeverything/components/ui';
 import { ContentColumnValue } from '@toeverything/datasource/db-service';
 import { CreateView } from '@toeverything/framework/virgo';
-import { Theme, styled } from '@toeverything/components/ui';
 
 import {
     TextManage,
@@ -81,7 +81,7 @@ export const PageView = ({ block, editor }: CreateView) => {
 
     return (
         <PageTitleBlock>
-            <BlockPendantProvider block={block}>
+            <BlockPendantProvider editor={editor} block={block}>
                 <TextManage
                     alwaysShowPlaceholder
                     ref={textRef}

libs/components/editor-blocks/src/blocks/text/TextView.tsx

@@ -242,7 +242,7 @@ export const TextView = ({
             selected={isSelect}
             className={containerClassName}
         >
-            <BlockPendantProvider block={block}>
+            <BlockPendantProvider editor={editor} block={block}>
                 <TextBlock
                     block={block}
                     type={block.type}

libs/components/editor-blocks/src/blocks/todo/TodoView.tsx

@@ -132,7 +132,7 @@ export const TodoView = ({ block, editor }: CreateView) => {
 
     return (
         <BlockContainer editor={editor} block={block} selected={isSelect}>
-            <BlockPendantProvider block={block}>
+            <BlockPendantProvider editor={editor} block={block}>
                 <TodoBlock>
                     <div className={'checkBoxContainer'}>
                         <CheckBox

libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx

@@ -1,7 +1,12 @@
 import { styled } from '@toeverything/components/ui';
-import type { PropsWithChildren } from 'react';
+import { containerFlavor } from '@toeverything/datasource/db-service';
-import { useRef } from 'react';
+import {
-import type { AsyncBlock } from '../editor';
+    useCallback,
+    useRef,
+    type MouseEvent,
+    type PropsWithChildren,
+} from 'react';
+import type { AsyncBlock, BlockEditor } from '../editor';
 import { getRecastItemValue, useRecastBlockMeta } from '../recast-block';
 import { PendantPopover } from './pendant-popover';
 import { PendantRender } from './pendant-render';
@@ -9,10 +14,12 @@ import { PendantRender } from './pendant-render';
  * @deprecated
  */
 interface BlockTagProps {
+    editor: BlockEditor;
     block: AsyncBlock;
 }
 
 export const BlockPendantProvider = ({
+    editor,
     block,
     children,
 }: PropsWithChildren<BlockTagProps>) => {
@@ -23,8 +30,23 @@ export const BlockPendantProvider = ({
     const showTriggerLine =
         properties.filter(property => getValue(property.id)).length === 0;
 
+    const onClick = useCallback(
+        (e: MouseEvent<HTMLDivElement>) => {
+            if (containerFlavor.includes(block.type)) {
+                return;
+            }
+            if (e.target === e.currentTarget) {
+                const rect = e.currentTarget.getBoundingClientRect();
+                const middle = (rect.left + rect.right) / 2;
+                const position = e.clientX < middle ? 'start' : 'end';
+                editor.selectionManager.activeNodeByNodeId(block.id, position);
+            }
+        },
+        [editor, block]
+    );
+
     return (
-        <Container>
+        <Container onClick={onClick}>
             {children}
 
             {showTriggerLine ? (

libs/components/editor-core/src/editor/scroll/scroll.ts

@@ -196,11 +196,11 @@ export class ScrollManager {
     private _getKeepInViewParams(blockRect: Rect) {
         if (this.scrollContainer == null) return 0;
         const { top, bottom } = domToRect(this._scrollContainer);
-        if (blockRect.top <= top + blockRect.height * 3) {
+        if (blockRect.top <= top + blockRect.height) {
             return -1;
         }
 
-        if (blockRect.bottom >= bottom - blockRect.height * 3) {
+        if (blockRect.bottom >= bottom - blockRect.height) {
             return 1;
         }
         return 0;

libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx

@@ -1,3 +1,4 @@
+import { containerFlavor } from '@toeverything/datasource/db-service';
 import { BlockDropPlacement, HookType } from '@toeverything/framework/virgo';
 import { domToRect, last, Point } from '@toeverything/utils';
 import { StrictMode } from 'react';
@@ -9,7 +10,6 @@ import {
     LeftMenuDraggable,
     LineInfoSubject,
 } from './LeftMenuDraggable';
-import { ignoreBlockTypes } from './menu-config';
 const DRAG_THROTTLE_DELAY = 60;
 export class LeftMenuPlugin extends BasePlugin {
     private _mousedown?: boolean;
@@ -104,7 +104,7 @@ export class LeftMenuPlugin extends BasePlugin {
         const block = await this.editor.getBlockByPoint(
             new Point(event.clientX, event.clientY)
         );
-        if (block == null || ignoreBlockTypes.includes(block.type)) return;
+        if (block == null || containerFlavor.includes(block.type)) return;
         const { direction, block: targetBlock } =
             await this.editor.dragDropManager.checkBlockDragTypes(
                 event,
@@ -143,7 +143,7 @@ export class LeftMenuPlugin extends BasePlugin {
         const node = await this.editor.getBlockByPoint(
             new Point(event.clientX, event.clientY)
         );
-        if (node == null || ignoreBlockTypes.includes(node.type)) {
+        if (node == null || containerFlavor.includes(node.type)) {
             return;
         }
         if (node.dom) {

libs/components/editor-plugins/src/menu/left-menu/menu-config.ts

@@ -1,14 +1,14 @@
-import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
-import ShortTextIcon from '@mui/icons-material/ShortText';
-import TitleIcon from '@mui/icons-material/Title';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
 import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
+import ListIcon from '@mui/icons-material/List';
 import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
+import ShortTextIcon from '@mui/icons-material/ShortText';
+import TitleIcon from '@mui/icons-material/Title';
 import {
     CodeBlockInlineIcon,
     PagesIcon,
 } from '@toeverything/components/common';
-import ListIcon from '@mui/icons-material/List';
+import { Protocol } from '@toeverything/datasource/db-service';
 export const MENU_WIDTH = 14;
 export const pageConvertIconSize = 24;
 type MenuItem = {
@@ -93,12 +93,3 @@ const textTypeBlocks: MenuItem[] = [
 export const addMenuList = [...textTypeBlocks].filter(v => v);
 
 export const textConvertMenuList = textTypeBlocks;
-
-export const ignoreBlockTypes: BlockFlavorKeys[] = [
-    Protocol.Block.Type.workspace,
-    Protocol.Block.Type.page,
-    Protocol.Block.Type.group,
-    Protocol.Block.Type.title,
-    Protocol.Block.Type.grid,
-    Protocol.Block.Type.gridItem,
-];

libs/datasource/db-service/src/index.ts

@@ -42,6 +42,7 @@ export {
     type TemplateMeta,
 } from './services/editor-block/templates';
 export type { Template } from './services/editor-block/templates/types';
+export { containerFlavor } from './services/editor-block/types';
 export { DEFAULT_COLUMN_KEYS } from './services/editor-block/utils/column/default-config';
 
 const api = new Proxy<DbServicesMap>({} as DbServicesMap, {

libs/datasource/db-service/src/services/editor-block/types.ts

@@ -4,6 +4,15 @@ import { Column, DefaultColumnsValue } from './utils/column';
 export type BlockFlavors = typeof Protocol.Block.Type;
 export type BlockFlavorKeys = keyof typeof Protocol.Block.Type;
 
+export const containerFlavor: BlockFlavorKeys[] = [
+    Protocol.Block.Type.workspace,
+    Protocol.Block.Type.page,
+    Protocol.Block.Type.group,
+    Protocol.Block.Type.title,
+    Protocol.Block.Type.grid,
+    Protocol.Block.Type.gridItem,
+];
+
 export interface CreateEditorBlock {
     workspace: string;
     type: keyof BlockFlavors;