toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2025-01-09 03:39:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'toeverything:develop' into dev

Browse Source
This commit is contained in:
JimmFly 2022-08-29 18:42:15 +08:00 committed by GitHub
commit d0c55f5081
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx
View File

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

11
libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx
View File

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

3
libs/components/editor-blocks/src/blocks/grid/Grid.tsx
View File

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

21
libs/components/editor-blocks/src/blocks/group/GroupView.tsx
View File

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

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

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

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

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

6
libs/components/editor-blocks/src/blocks/group/scene-kanban/RefPage.tsx
View File

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

7
libs/components/editor-core/src/render-block/Context.tsx
View File

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

5
libs/components/editor-core/src/render-block/RenderBlock.tsx
View File

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

3
libs/components/editor-core/src/render-block/RenderBlockChildren.tsx
View File

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

2
libs/components/editor-core/src/render-block/index.ts
View File

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