mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 10:21:35 +03:00
refactor: update editor
This commit is contained in:
parent
eb02e62a0e
commit
dd24711f21
@ -1,7 +1,6 @@
|
|||||||
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
|
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
RenderBlock,
|
|
||||||
RenderRoot,
|
RenderRoot,
|
||||||
type BlockEditor,
|
type BlockEditor,
|
||||||
} from '@toeverything/components/editor-core';
|
} from '@toeverything/components/editor-core';
|
||||||
@ -88,9 +87,7 @@ export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
|
|||||||
editor={editor}
|
editor={editor}
|
||||||
editorElement={AffineEditor as any}
|
editorElement={AffineEditor as any}
|
||||||
scrollBlank={scrollBlank}
|
scrollBlank={scrollBlank}
|
||||||
>
|
/>
|
||||||
<RenderBlock blockId={editor.getRootBlockId()} />
|
|
||||||
</RenderRoot>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -1,22 +1,34 @@
|
|||||||
import { createContext, useContext } from 'react';
|
|
||||||
import type { BlockEditor, AsyncBlock } from './editor';
|
|
||||||
import { genErrorObj } from '@toeverything/utils';
|
import { genErrorObj } from '@toeverything/utils';
|
||||||
|
import { createContext, PropsWithChildren, useContext } from 'react';
|
||||||
|
import type { AsyncBlock, BlockEditor } from './editor';
|
||||||
|
|
||||||
const RootContext = createContext<{
|
type EditorProps = {
|
||||||
editor: BlockEditor;
|
editor: BlockEditor;
|
||||||
// TODO: Temporary fix, dependencies in the new architecture are bottom-up, editors do not need to be passed down from the top
|
// TODO: Temporary fix, dependencies in the new architecture are bottom-up, editors do not need to be passed down from the top
|
||||||
editorElement: () => JSX.Element;
|
editorElement: () => JSX.Element;
|
||||||
}>(
|
};
|
||||||
|
|
||||||
|
const EditorContext = createContext<EditorProps>(
|
||||||
genErrorObj(
|
genErrorObj(
|
||||||
'Failed to get context! The context only can use under the "render-root"'
|
'Failed to get EditorContext! The context only can use under the "render-root"'
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
) as any
|
) as any
|
||||||
);
|
);
|
||||||
|
|
||||||
export const EditorProvider = RootContext.Provider;
|
|
||||||
|
|
||||||
export const useEditor = () => {
|
export const useEditor = () => {
|
||||||
return useContext(RootContext);
|
return useContext(EditorContext);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const EditorProvider = ({
|
||||||
|
editor,
|
||||||
|
editorElement,
|
||||||
|
children,
|
||||||
|
}: PropsWithChildren<EditorProps>) => {
|
||||||
|
return (
|
||||||
|
<EditorContext.Provider value={{ editor, editorElement }}>
|
||||||
|
{children}
|
||||||
|
</EditorContext.Provider>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -4,12 +4,12 @@ import {
|
|||||||
services,
|
services,
|
||||||
type ReturnUnobserve,
|
type ReturnUnobserve,
|
||||||
} from '@toeverything/datasource/db-service';
|
} from '@toeverything/datasource/db-service';
|
||||||
import type { PropsWithChildren } from 'react';
|
|
||||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import { EditorProvider } from './Contexts';
|
import { EditorProvider } from './Contexts';
|
||||||
import type { BlockEditor } from './editor';
|
import type { BlockEditor } from './editor';
|
||||||
import { useIsOnDrag } from './hooks';
|
import { useIsOnDrag } from './hooks';
|
||||||
import { addNewGroup, appendNewGroup } from './recast-block';
|
import { addNewGroup, appendNewGroup } from './recast-block';
|
||||||
|
import { BlockRenderProvider, RenderBlock } from './render-block';
|
||||||
import { SelectionRect, SelectionRef } from './Selection';
|
import { SelectionRect, SelectionRef } from './Selection';
|
||||||
|
|
||||||
interface RenderRootProps {
|
interface RenderRootProps {
|
||||||
@ -24,11 +24,7 @@ interface RenderRootProps {
|
|||||||
const MAX_PAGE_WIDTH = 5000;
|
const MAX_PAGE_WIDTH = 5000;
|
||||||
export const MIN_PAGE_WIDTH = 1480;
|
export const MIN_PAGE_WIDTH = 1480;
|
||||||
|
|
||||||
export const RenderRoot = ({
|
export const RenderRoot = ({ editor, editorElement }: RenderRootProps) => {
|
||||||
editor,
|
|
||||||
editorElement,
|
|
||||||
children,
|
|
||||||
}: PropsWithChildren<RenderRootProps>) => {
|
|
||||||
const selectionRef = useRef<SelectionRef>(null);
|
const selectionRef = useRef<SelectionRef>(null);
|
||||||
const triggeredBySelect = useRef(false);
|
const triggeredBySelect = useRef(false);
|
||||||
const [pageWidth, setPageWidth] = useState<number>(MIN_PAGE_WIDTH);
|
const [pageWidth, setPageWidth] = useState<number>(MIN_PAGE_WIDTH);
|
||||||
@ -158,39 +154,43 @@ export const RenderRoot = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EditorProvider value={{ editor, editorElement }}>
|
<EditorProvider editor={editor} editorElement={editorElement}>
|
||||||
<Container
|
<BlockRenderProvider blockRender={RenderBlock}>
|
||||||
isEdgeless={editor.isEdgeless}
|
<Container
|
||||||
ref={ref => {
|
isEdgeless={editor.isEdgeless}
|
||||||
if (ref != null && ref !== editor.container) {
|
ref={ref => {
|
||||||
editor.container = ref;
|
if (ref != null && ref !== editor.container) {
|
||||||
editor.getHooks().render();
|
editor.container = ref;
|
||||||
}
|
editor.getHooks().render();
|
||||||
}}
|
}
|
||||||
onMouseMove={onMouseMove}
|
}}
|
||||||
onMouseDown={onMouseDown}
|
onMouseMove={onMouseMove}
|
||||||
onMouseUp={onMouseUp}
|
onMouseDown={onMouseDown}
|
||||||
onMouseLeave={onMouseLeave}
|
onMouseUp={onMouseUp}
|
||||||
onMouseOut={onMouseOut}
|
onMouseLeave={onMouseLeave}
|
||||||
onContextMenu={onContextmenu}
|
onMouseOut={onMouseOut}
|
||||||
onKeyDown={onKeyDown}
|
onContextMenu={onContextmenu}
|
||||||
onKeyDownCapture={onKeyDownCapture}
|
onKeyDown={onKeyDown}
|
||||||
onKeyUp={onKeyUp}
|
onKeyDownCapture={onKeyDownCapture}
|
||||||
onDragOver={onDragOver}
|
onKeyUp={onKeyUp}
|
||||||
onDragLeave={onDragLeave}
|
onDragOver={onDragOver}
|
||||||
onDragOverCapture={onDragOverCapture}
|
onDragLeave={onDragLeave}
|
||||||
onDragEnd={onDragEnd}
|
onDragOverCapture={onDragOverCapture}
|
||||||
onDrop={onDrop}
|
onDragEnd={onDragEnd}
|
||||||
isOnDrag={isOnDrag}
|
onDrop={onDrop}
|
||||||
>
|
isOnDrag={isOnDrag}
|
||||||
<Content style={{ maxWidth: pageWidth + 'px' }}>
|
>
|
||||||
{children}
|
<Content style={{ maxWidth: pageWidth + 'px' }}>
|
||||||
</Content>
|
<RenderBlock blockId={editor.getRootBlockId()} />
|
||||||
{/** TODO: remove selectionManager insert */}
|
</Content>
|
||||||
{editor && <SelectionRect ref={selectionRef} editor={editor} />}
|
{/** TODO: remove selectionManager insert */}
|
||||||
{editor.isEdgeless ? null : <ScrollBlank editor={editor} />}
|
{editor && (
|
||||||
{patchedNodes}
|
<SelectionRect ref={selectionRef} editor={editor} />
|
||||||
</Container>
|
)}
|
||||||
|
{editor.isEdgeless ? null : <ScrollBlank editor={editor} />}
|
||||||
|
{patchedNodes}
|
||||||
|
</Container>
|
||||||
|
</BlockRenderProvider>
|
||||||
</EditorProvider>
|
</EditorProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@ -251,7 +251,7 @@ function ScrollBlank({ editor }: { editor: BlockEditor }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScrollBlankContainter
|
<ScrollBlankContainer
|
||||||
onMouseDown={onMouseDown}
|
onMouseDown={onMouseDown}
|
||||||
onMouseMove={onMouseMove}
|
onMouseMove={onMouseMove}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
@ -283,7 +283,7 @@ const Content = styled('div')({
|
|||||||
transitionTimingFunction: 'ease-in',
|
transitionTimingFunction: 'ease-in',
|
||||||
});
|
});
|
||||||
|
|
||||||
const ScrollBlankContainter = styled('div')({
|
const ScrollBlankContainer = styled('div')({
|
||||||
paddingBottom: '30vh',
|
paddingBottom: '30vh',
|
||||||
margin: `0 -${PADDING_X}px`,
|
margin: `0 -${PADDING_X}px`,
|
||||||
});
|
});
|
||||||
|
@ -1,19 +1,16 @@
|
|||||||
export { RenderRoot, MIN_PAGE_WIDTH } from './RenderRoot';
|
|
||||||
export * from './render-block';
|
|
||||||
export * from './hooks';
|
|
||||||
|
|
||||||
export { RenderBlock } from './render-block';
|
|
||||||
|
|
||||||
export * from './recast-block';
|
|
||||||
export * from './recast-block/types';
|
|
||||||
|
|
||||||
export * from './block-pendant';
|
export * from './block-pendant';
|
||||||
|
export { useEditor } from './Contexts';
|
||||||
|
export * from './editor';
|
||||||
|
export * from './hooks';
|
||||||
export * from './kanban';
|
export * from './kanban';
|
||||||
export * from './kanban/types';
|
export * from './kanban/types';
|
||||||
|
export * from './recast-block';
|
||||||
|
export * from './recast-block/types';
|
||||||
|
export {
|
||||||
|
BlockRenderProvider,
|
||||||
|
RenderBlockChildren,
|
||||||
|
useBlockRender,
|
||||||
|
withTreeViewChildren,
|
||||||
|
} from './render-block';
|
||||||
|
export { MIN_PAGE_WIDTH, RenderRoot } from './RenderRoot';
|
||||||
export * from './utils';
|
export * from './utils';
|
||||||
|
|
||||||
export * from './editor';
|
|
||||||
|
|
||||||
export { useEditor } from './Contexts';
|
|
||||||
|
@ -10,6 +10,8 @@ import {
|
|||||||
RecastMetaProperty,
|
RecastMetaProperty,
|
||||||
RecastPropertyId,
|
RecastPropertyId,
|
||||||
} from '../recast-block/types';
|
} from '../recast-block/types';
|
||||||
|
import { BlockRenderProvider } from '../render-block';
|
||||||
|
import { KanbanBlockRender } from '../render-block/RenderKanbanBlock';
|
||||||
import { useInitKanbanEffect, useRecastKanban } from './kanban';
|
import { useInitKanbanEffect, useRecastKanban } from './kanban';
|
||||||
import { KanbanGroup } from './types';
|
import { KanbanGroup } from './types';
|
||||||
|
|
||||||
@ -54,9 +56,11 @@ export const KanbanProvider = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<KanbanContext.Provider value={value}>
|
<BlockRenderProvider blockRender={KanbanBlockRender}>
|
||||||
{children}
|
<KanbanContext.Provider value={value}>
|
||||||
</KanbanContext.Provider>
|
{children}
|
||||||
|
</KanbanContext.Provider>
|
||||||
|
</BlockRenderProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user