mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 13:25:12 +00:00
refactor(editor): move editor components to frontend core (#10335)
### TL;DR Moved editor components from BlockSuite presets to AFFiNE core and updated imports accordingly. ### What changed? - Relocated `EdgelessEditor` and `PageEditor` components from BlockSuite presets to AFFiNE core - Removed basic editor examples from playground - Updated import paths across the codebase to reference new component locations - Added editor effects registration in AFFiNE core - Removed editor exports from BlockSuite presets ### How to test? 1. Launch the application 2. Verify both page and edgeless editors load correctly 3. Confirm editor functionality remains intact including: - Document editing - Mode switching - Editor toolbars and controls - Multiple editor instances ### Why make this change? This change better aligns with AFFiNE's architecture by moving editor components closer to where they are used. It reduces coupling with BlockSuite presets and gives AFFiNE more direct control over editor customization and implementation.
This commit is contained in:
@@ -1,16 +1,17 @@
|
||||
import type {
|
||||
EdgelessEditor,
|
||||
PageEditor,
|
||||
} from '@affine/core/blocksuite/editors';
|
||||
import { FeatureFlagService } from '@affine/core/modules/feature-flag';
|
||||
import type { BlockStdScope, EditorHost } from '@blocksuite/affine/block-std';
|
||||
import {
|
||||
appendParagraphCommand,
|
||||
type DocMode,
|
||||
type DocTitle,
|
||||
focusBlockEnd,
|
||||
getLastNoteBlock,
|
||||
type RootBlockModel,
|
||||
} from '@blocksuite/affine/blocks';
|
||||
import type {
|
||||
AffineEditorContainer,
|
||||
EdgelessEditor,
|
||||
PageEditor,
|
||||
} from '@blocksuite/affine/presets';
|
||||
import { type Store } from '@blocksuite/affine/store';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import clsx from 'clsx';
|
||||
@@ -37,6 +38,18 @@ interface BlocksuiteEditorContainerProps {
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export interface AffineEditorContainer extends HTMLElement {
|
||||
page: Store;
|
||||
doc: Store;
|
||||
docTitle: DocTitle;
|
||||
host: EditorHost;
|
||||
model: RootBlockModel | null;
|
||||
updateComplete: Promise<boolean>;
|
||||
mode: DocMode;
|
||||
origin: HTMLDivElement;
|
||||
std: BlockStdScope;
|
||||
}
|
||||
|
||||
export const BlocksuiteEditorContainer = forwardRef<
|
||||
AffineEditorContainer,
|
||||
BlocksuiteEditorContainerProps
|
||||
@@ -66,9 +79,11 @@ export const BlocksuiteEditorContainer = forwardRef<
|
||||
return docTitleRef.current;
|
||||
},
|
||||
get host() {
|
||||
return mode === 'page'
|
||||
? docRef.current?.host
|
||||
: edgelessRef.current?.host;
|
||||
return (
|
||||
(mode === 'page'
|
||||
? docRef.current?.host
|
||||
: edgelessRef.current?.host) ?? null
|
||||
);
|
||||
},
|
||||
get model() {
|
||||
return page.root as any;
|
||||
@@ -110,7 +125,7 @@ export const BlocksuiteEditorContainer = forwardRef<
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
}) as unknown as AffineEditorContainer & { origin: HTMLDivElement };
|
||||
}) as AffineEditorContainer;
|
||||
|
||||
return proxy;
|
||||
}, [mode, page]);
|
||||
|
||||
@@ -12,7 +12,6 @@ import {
|
||||
LinkPreviewerService,
|
||||
} from '@blocksuite/affine/blocks';
|
||||
import { DisposableGroup } from '@blocksuite/affine/global/utils';
|
||||
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
|
||||
import type { Store } from '@blocksuite/affine/store';
|
||||
import { Slot } from '@radix-ui/react-slot';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
@@ -21,7 +20,10 @@ import type { CSSProperties } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import type { DefaultOpenProperty } from '../../doc-properties';
|
||||
import { BlocksuiteEditorContainer } from './blocksuite-editor-container';
|
||||
import {
|
||||
type AffineEditorContainer,
|
||||
BlocksuiteEditorContainer,
|
||||
} from './blocksuite-editor-container';
|
||||
import { NoPageRootError } from './no-page-error';
|
||||
|
||||
export type EditorProps = {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { effects as editorEffects } from '@affine/core/blocksuite/editors';
|
||||
import { registerBlocksuitePresetsCustomComponents } from '@affine/core/blocksuite/presets/effects';
|
||||
import { effects as bsEffects } from '@blocksuite/affine/effects';
|
||||
|
||||
@@ -6,7 +7,9 @@ import { effects as patchEffects } from './specs/preview';
|
||||
|
||||
bsEffects();
|
||||
patchEffects();
|
||||
editorEffects();
|
||||
edgelessEffects();
|
||||
registerBlocksuitePresetsCustomComponents();
|
||||
|
||||
export * from './blocksuite-editor';
|
||||
export * from './blocksuite-editor-container';
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
useConfirmModal,
|
||||
useLitPortalFactory,
|
||||
} from '@affine/component';
|
||||
import { EdgelessEditor, PageEditor } from '@affine/core/blocksuite/editors';
|
||||
import type { DocCustomPropertyInfo } from '@affine/core/modules/db';
|
||||
import { DocService, DocsService } from '@affine/core/modules/doc';
|
||||
import type {
|
||||
@@ -27,7 +28,6 @@ import {
|
||||
slashMenuWidget,
|
||||
surfaceRefToolbarWidget,
|
||||
} from '@blocksuite/affine/blocks';
|
||||
import { EdgelessEditor, PageEditor } from '@blocksuite/affine/presets';
|
||||
import type { Store } from '@blocksuite/affine/store';
|
||||
import {
|
||||
useFramework,
|
||||
|
||||
@@ -21,12 +21,12 @@ import {
|
||||
titleMiddleware,
|
||||
ZipTransformer,
|
||||
} from '@blocksuite/affine/blocks';
|
||||
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
|
||||
import { type Store, Transformer } from '@blocksuite/affine/store';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { nanoid } from 'nanoid';
|
||||
|
||||
import type { AffineEditorContainer } from '../../blocksuite/block-suite-editor/blocksuite-editor-container';
|
||||
import { useAsyncCallback } from '../affine-async-hooks';
|
||||
|
||||
type ExportType = 'pdf' | 'html' | 'png' | 'markdown' | 'snapshot';
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
|
||||
import type { SetStateAction } from 'jotai';
|
||||
import { atom, useAtom } from 'jotai';
|
||||
|
||||
import type { AffineEditorContainer } from '../blocksuite/block-suite-editor';
|
||||
|
||||
const activeEditorContainerAtom = atom<AffineEditorContainer | null>(null);
|
||||
|
||||
export function useActiveBlocksuiteEditor(): [
|
||||
|
||||
@@ -9,7 +9,6 @@ import { UrlService } from '@affine/core/modules/url';
|
||||
import { WorkspaceService } from '@affine/core/modules/workspace';
|
||||
import { useI18n } from '@affine/i18n';
|
||||
import { TextSelection } from '@blocksuite/affine/block-std';
|
||||
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
|
||||
import { useService, useServiceOptional } from '@toeverything/infra';
|
||||
import { useStore } from 'jotai';
|
||||
import { useTheme } from 'next-themes';
|
||||
@@ -29,6 +28,7 @@ import {
|
||||
import { usePageHelper } from '../../components/blocksuite/block-suite-page-list/utils';
|
||||
import { EditorSettingService } from '../../modules/editor-setting';
|
||||
import { CMDKQuickSearchService } from '../../modules/quicksearch/services/cmdk';
|
||||
import type { AffineEditorContainer } from '../blocksuite/block-suite-editor';
|
||||
import { useActiveBlocksuiteEditor } from './use-block-suite-editor';
|
||||
import { useNavigateHelper } from './use-navigate-helper';
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import './page-detail-editor.css';
|
||||
|
||||
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
|
||||
import { useLiveData, useService } from '@toeverything/infra';
|
||||
import clsx from 'clsx';
|
||||
import { useEffect } from 'react';
|
||||
@@ -8,6 +7,7 @@ import { useEffect } from 'react';
|
||||
import { DocService } from '../modules/doc';
|
||||
import { EditorService } from '../modules/editor';
|
||||
import { EditorSettingService } from '../modules/editor-setting';
|
||||
import type { AffineEditorContainer } from './blocksuite/block-suite-editor';
|
||||
import { BlockSuiteEditor } from './blocksuite/block-suite-editor';
|
||||
import * as styles from './page-detail-editor.css';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user