toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 15:51:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): focus block when click on space

Browse Source
This commit is contained in:
austaras 2022-08-24 18:25:57 +08:00 committed by Austaras
parent 77e3513d6d
commit 3e0d076899
15 changed files with 64 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx
View File

@ -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} />

5
libs/components/editor-blocks/src/blocks/code/CodeView.tsx
View File

@ -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>

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

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

11
libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx
View File

@ -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

6
libs/components/editor-blocks/src/blocks/image/ImageView.tsx
View File

@ -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 ? (
<ImageShade onClick={handleClick}></ImageShade>
) : null}
{!isSelect ? <ImageShade onClick={handleClick} /> : null}
{imgUrl ? (
<div
onMouseDown={e => {

2
libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx
View File

@ -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)}.

8
libs/components/editor-blocks/src/blocks/page/PageView.tsx
View File

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

2
libs/components/editor-blocks/src/blocks/text/TextView.tsx
View File

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

2
libs/components/editor-blocks/src/blocks/todo/TodoView.tsx
View File

@ -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

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

@ -1,7 +1,12 @@
import { styled } from '@toeverything/components/ui';
import type { PropsWithChildren } from 'react';
import { useRef } from 'react';
import type { AsyncBlock } from '../editor';
import { containerFlavor } from '@toeverything/datasource/db-service';
import {
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 ? (

4
libs/components/editor-core/src/editor/scroll/scroll.ts
View File

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

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

@ -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) {

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

@ -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,
];

1
libs/datasource/db-service/src/index.ts
View File

@ -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, {

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

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