From adcc6b578c1b9b4cdb7391b93348ea97e3d475f9 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Fri, 21 Feb 2025 04:28:54 +0000 Subject: [PATCH] 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. --- .../examples/basic/edgeless/index.html | 23 ------------- .../examples/basic/edgeless/main.ts | 15 --------- .../playground/examples/basic/page/index.html | 23 ------------- .../playground/examples/basic/page/main.ts | 20 ----------- .../edgeless-edgeless/index.html | 23 ------------- .../edgeless-edgeless/main.ts | 30 ----------------- .../multiple-editors/page-edgeless/index.html | 23 ------------- .../multiple-editors/page-edgeless/main.ts | 30 ----------------- .../multiple-editors/page-page/index.html | 23 ------------- .../multiple-editors/page-page/main.ts | 30 ----------------- blocksuite/playground/index.html | 13 ++++++++ blocksuite/playground/vite.config.ts | 20 ----------- blocksuite/presets/src/editors/index.ts | 2 -- blocksuite/presets/src/effects.ts | 8 +---- .../tests-legacy/e2e/utils/inline-editor.ts | 11 +++---- .../blocksuite}/editors/edgeless-editor.ts | 11 ++++--- .../core/src/blocksuite/editors/index.ts | 10 ++++++ .../src/blocksuite}/editors/page-editor.ts | 12 ++++--- .../blocksuite-editor-container.tsx | 33 ++++++++++++++----- .../block-suite-editor/blocksuite-editor.tsx | 6 ++-- .../blocksuite/block-suite-editor/index.ts | 3 ++ .../block-suite-editor/lit-adaper.tsx | 2 +- .../hooks/affine/use-export-page.ts | 2 +- .../hooks/use-block-suite-editor.ts | 3 +- .../hooks/use-register-workspace-commands.ts | 2 +- .../src/components/page-detail-editor.tsx | 2 +- .../workspace/detail-page/detail-page.tsx | 2 +- .../pages/workspace/detail-page/tabs/chat.tsx | 2 +- .../pages/workspace/share/share-page.tsx | 2 +- .../workspace/detail/mobile-detail-page.tsx | 2 +- .../src/modules/editor/entities/editor.ts | 2 +- .../view/doc-preview/doc-peek-view.tsx | 2 +- .../e2e/blocksuite/edgeless/note.spec.ts | 18 ++++------ tests/kit/src/utils/editor.ts | 16 +++++---- 34 files changed, 102 insertions(+), 324 deletions(-) delete mode 100644 blocksuite/playground/examples/basic/edgeless/index.html delete mode 100644 blocksuite/playground/examples/basic/edgeless/main.ts delete mode 100644 blocksuite/playground/examples/basic/page/index.html delete mode 100644 blocksuite/playground/examples/basic/page/main.ts delete mode 100644 blocksuite/playground/examples/multiple-editors/edgeless-edgeless/index.html delete mode 100644 blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts delete mode 100644 blocksuite/playground/examples/multiple-editors/page-edgeless/index.html delete mode 100644 blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts delete mode 100644 blocksuite/playground/examples/multiple-editors/page-page/index.html delete mode 100644 blocksuite/playground/examples/multiple-editors/page-page/main.ts rename {blocksuite/presets/src => packages/frontend/core/src/blocksuite}/editors/edgeless-editor.ts (87%) create mode 100644 packages/frontend/core/src/blocksuite/editors/index.ts rename {blocksuite/presets/src => packages/frontend/core/src/blocksuite}/editors/page-editor.ts (91%) diff --git a/blocksuite/playground/examples/basic/edgeless/index.html b/blocksuite/playground/examples/basic/edgeless/index.html deleted file mode 100644 index 29a6b70feb..0000000000 --- a/blocksuite/playground/examples/basic/edgeless/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - Basic EdgelessEditor Example - - - - - - diff --git a/blocksuite/playground/examples/basic/edgeless/main.ts b/blocksuite/playground/examples/basic/edgeless/main.ts deleted file mode 100644 index 0f8e2b6c4b..0000000000 --- a/blocksuite/playground/examples/basic/edgeless/main.ts +++ /dev/null @@ -1,15 +0,0 @@ -import '../../../style.css'; - -import { effects as blocksEffects } from '@blocksuite/blocks/effects'; -import { EdgelessEditor } from '@blocksuite/presets'; -import { effects as presetsEffects } from '@blocksuite/presets/effects'; - -import { createEmptyDoc } from '../../../apps/_common/helper'; - -blocksEffects(); -presetsEffects(); - -const doc = createEmptyDoc().init(); -const editor = new EdgelessEditor(); -editor.doc = doc; -document.body.append(editor); diff --git a/blocksuite/playground/examples/basic/page/index.html b/blocksuite/playground/examples/basic/page/index.html deleted file mode 100644 index c3d3d96126..0000000000 --- a/blocksuite/playground/examples/basic/page/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - Basic PageEditor Example - - - - - - diff --git a/blocksuite/playground/examples/basic/page/main.ts b/blocksuite/playground/examples/basic/page/main.ts deleted file mode 100644 index 8fd32baa6d..0000000000 --- a/blocksuite/playground/examples/basic/page/main.ts +++ /dev/null @@ -1,20 +0,0 @@ -import '../../../style.css'; - -import { effects as blocksEffects } from '@blocksuite/blocks/effects'; -import { PageEditor } from '@blocksuite/presets'; -import { effects as presetsEffects } from '@blocksuite/presets/effects'; -import { Text } from '@blocksuite/store'; - -import { createEmptyDoc } from '../../../apps/_common/helper'; - -blocksEffects(); -presetsEffects(); - -const doc = createEmptyDoc().init(); -const editor = new PageEditor(); -editor.doc = doc; -document.body.append(editor); - -const paragraphs = doc.getBlockByFlavour('affine:paragraph'); -const paragraph = paragraphs[0]; -doc.updateBlock(paragraph, { text: new Text('Hello World!') }); diff --git a/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/index.html b/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/index.html deleted file mode 100644 index ce9616a52b..0000000000 --- a/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - Edgeless+Edgeless Multiple-Editors Example - - - - - - diff --git a/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts b/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts deleted file mode 100644 index 79d8c3368f..0000000000 --- a/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts +++ /dev/null @@ -1,30 +0,0 @@ -import '../../../style.css'; - -import { effects as blocksEffects } from '@blocksuite/blocks/effects'; -import { EdgelessEditor } from '@blocksuite/presets'; -import { effects as presetsEffects } from '@blocksuite/presets/effects'; - -import { createEmptyDoc } from '../../../apps/_common/helper'; - -blocksEffects(); -presetsEffects(); - -const container = document.createElement('div'); -container.style.display = 'flex'; -container.style.height = '100%'; -container.style.width = '100%'; -document.body.append(container); - -const doc1 = createEmptyDoc().init(); -const editor1 = new EdgelessEditor(); -editor1.doc = doc1; -editor1.style.flex = '1'; -editor1.style.borderRight = '1px solid #ccc'; -container.append(editor1); - -const doc2 = createEmptyDoc().init(); -const editor2 = new EdgelessEditor(); -editor2.doc = doc2; -editor2.style.flex = '1'; -editor2.style.borderLeft = '1px solid #ccc'; -container.append(editor2); diff --git a/blocksuite/playground/examples/multiple-editors/page-edgeless/index.html b/blocksuite/playground/examples/multiple-editors/page-edgeless/index.html deleted file mode 100644 index e8948eb2f8..0000000000 --- a/blocksuite/playground/examples/multiple-editors/page-edgeless/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - Doc+Edgeless Multiple-Editors Example - - - - - - diff --git a/blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts b/blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts deleted file mode 100644 index 6c1138ddbe..0000000000 --- a/blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts +++ /dev/null @@ -1,30 +0,0 @@ -import '../../../style.css'; - -import { effects as blocksEffects } from '@blocksuite/blocks/effects'; -import { EdgelessEditor, PageEditor } from '@blocksuite/presets'; -import { effects as presetsEffects } from '@blocksuite/presets/effects'; - -import { createEmptyDoc } from '../../../apps/_common/helper'; - -blocksEffects(); -presetsEffects(); - -const container = document.createElement('div'); -container.style.display = 'flex'; -container.style.height = '100%'; -container.style.width = '100%'; -document.body.append(container); - -const doc1 = createEmptyDoc().init(); -const editor1 = new PageEditor(); -editor1.doc = doc1; -editor1.style.flex = '2'; -editor1.style.borderRight = '1px solid #ccc'; -container.append(editor1); - -const doc2 = createEmptyDoc().init(); -const editor2 = new EdgelessEditor(); -editor2.doc = doc2; -editor2.style.flex = '3'; -editor2.style.borderLeft = '1px solid #ccc'; -container.append(editor2); diff --git a/blocksuite/playground/examples/multiple-editors/page-page/index.html b/blocksuite/playground/examples/multiple-editors/page-page/index.html deleted file mode 100644 index d7ae1fdf0f..0000000000 --- a/blocksuite/playground/examples/multiple-editors/page-page/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - Doc+Doc Multiple-Editors Example - - - - - - diff --git a/blocksuite/playground/examples/multiple-editors/page-page/main.ts b/blocksuite/playground/examples/multiple-editors/page-page/main.ts deleted file mode 100644 index d53998a7f6..0000000000 --- a/blocksuite/playground/examples/multiple-editors/page-page/main.ts +++ /dev/null @@ -1,30 +0,0 @@ -import '../../../style.css'; - -import { effects as blocksEffects } from '@blocksuite/blocks/effects'; -import { PageEditor } from '@blocksuite/presets'; -import { effects as presetsEffects } from '@blocksuite/presets/effects'; - -import { createEmptyDoc } from '../../../apps/_common/helper'; - -blocksEffects(); -presetsEffects(); - -const container = document.createElement('div'); -container.style.display = 'flex'; -container.style.height = '100%'; -container.style.width = '100%'; -document.body.append(container); - -const doc1 = createEmptyDoc().init(); -const editor1 = new PageEditor(); -editor1.doc = doc1; -editor1.style.flex = '1'; -editor1.style.borderRight = '1px solid #ccc'; -container.append(editor1); - -const doc2 = createEmptyDoc().init(); -const editor2 = new PageEditor(); -editor2.doc = doc2; -editor2.style.flex = '1'; -editor2.style.borderLeft = '1px solid #ccc'; -container.append(editor2); diff --git a/blocksuite/playground/index.html b/blocksuite/playground/index.html index c4fc2a09fc..7658d44b56 100644 --- a/blocksuite/playground/index.html +++ b/blocksuite/playground/index.html @@ -44,6 +44,19 @@ margin-top: 0px; } } + + affine-editor-container { + display: block; + height: 100%; + } + + .affine-page-viewport { + height: 100%; + } + + .playground-page-editor-container { + height: 100%; + } diff --git a/blocksuite/playground/vite.config.ts b/blocksuite/playground/vite.config.ts index 7ae0542ba0..f4dea70e08 100644 --- a/blocksuite/playground/vite.config.ts +++ b/blocksuite/playground/vite.config.ts @@ -99,26 +99,6 @@ export default defineConfig(({ mode }) => { }, input: { main: resolve(__dirname, 'index.html'), - 'examples/basic/page': resolve( - __dirname, - 'examples/basic/page/index.html' - ), - 'examples/basic/edgeless': resolve( - __dirname, - 'examples/basic/edgeless/index.html' - ), - 'examples/multiple-editors/page-page': resolve( - __dirname, - 'examples/multiple-editors/page-page/index.html' - ), - 'examples/multiple-editors/page-edgeless': resolve( - __dirname, - 'examples/multiple-editors/page-edgeless/index.html' - ), - 'examples/multiple-editors/edgeless-edgeless': resolve( - __dirname, - 'examples/multiple-editors/edgeless-edgeless/index.html' - ), 'examples/inline': resolve(__dirname, 'examples/inline/index.html'), }, treeshake: true, diff --git a/blocksuite/presets/src/editors/index.ts b/blocksuite/presets/src/editors/index.ts index 0ca8466928..00aced7fb2 100644 --- a/blocksuite/presets/src/editors/index.ts +++ b/blocksuite/presets/src/editors/index.ts @@ -1,3 +1 @@ -export * from './edgeless-editor.js'; export * from './editor-container.js'; -export * from './page-editor.js'; diff --git a/blocksuite/presets/src/effects.ts b/blocksuite/presets/src/effects.ts index 6aa7fa2681..19994bce1a 100644 --- a/blocksuite/presets/src/effects.ts +++ b/blocksuite/presets/src/effects.ts @@ -1,18 +1,12 @@ import '@blocksuite/affine-shared/commands'; import '@blocksuite/blocks/effects'; -import { - AffineEditorContainer, - EdgelessEditor, - PageEditor, -} from './editors/index.js'; +import { AffineEditorContainer } from './editors/index.js'; import { CommentInput } from './fragments/comment/comment-input.js'; import { CommentPanel } from './fragments/index.js'; export function effects() { - customElements.define('page-editor', PageEditor); customElements.define('comment-input', CommentInput); customElements.define('comment-panel', CommentPanel); customElements.define('affine-editor-container', AffineEditorContainer); - customElements.define('edgeless-editor', EdgelessEditor); } diff --git a/blocksuite/tests-legacy/e2e/utils/inline-editor.ts b/blocksuite/tests-legacy/e2e/utils/inline-editor.ts index c03aae6f84..364eb2bd08 100644 --- a/blocksuite/tests-legacy/e2e/utils/inline-editor.ts +++ b/blocksuite/tests-legacy/e2e/utils/inline-editor.ts @@ -1,17 +1,14 @@ import type { Page } from '@playwright/test'; -import { currentEditorIndex } from './multiple-editor.js'; - export async function getStringFromRichText( page: Page, index = 0 ): Promise { await page.waitForTimeout(50); return page.evaluate( - ([index, currentEditorIndex]) => { - const editorHost = - document.querySelectorAll('editor-host')[currentEditorIndex]; - const richTexts = editorHost.querySelectorAll('rich-text'); + ([index]) => { + const editorHost = document.querySelector('editor-host'); + const richTexts = editorHost?.querySelectorAll('rich-text'); if (!richTexts) { throw new Error('Cannot find rich-text'); @@ -20,6 +17,6 @@ export async function getStringFromRichText( const editor = (richTexts[index] as any).inlineEditor; return editor.yText.toString(); }, - [index, currentEditorIndex] + [index] ); } diff --git a/blocksuite/presets/src/editors/edgeless-editor.ts b/packages/frontend/core/src/blocksuite/editors/edgeless-editor.ts similarity index 87% rename from blocksuite/presets/src/editors/edgeless-editor.ts rename to packages/frontend/core/src/blocksuite/editors/edgeless-editor.ts index 4b91dbda9d..976bcb640b 100644 --- a/blocksuite/presets/src/editors/edgeless-editor.ts +++ b/packages/frontend/core/src/blocksuite/editors/edgeless-editor.ts @@ -1,7 +1,10 @@ -import { BlockStdScope, ShadowlessElement } from '@blocksuite/block-std'; -import { EdgelessEditorBlockSpecs, ThemeProvider } from '@blocksuite/blocks'; -import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; -import type { Store } from '@blocksuite/store'; +import { BlockStdScope, ShadowlessElement } from '@blocksuite/affine/block-std'; +import { + EdgelessEditorBlockSpecs, + ThemeProvider, +} from '@blocksuite/affine/blocks'; +import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils'; +import type { Store } from '@blocksuite/affine/store'; import { css, html, nothing, type TemplateResult } from 'lit'; import { property, state } from 'lit/decorators.js'; import { guard } from 'lit/directives/guard.js'; diff --git a/packages/frontend/core/src/blocksuite/editors/index.ts b/packages/frontend/core/src/blocksuite/editors/index.ts new file mode 100644 index 0000000000..4ba445ba89 --- /dev/null +++ b/packages/frontend/core/src/blocksuite/editors/index.ts @@ -0,0 +1,10 @@ +import { EdgelessEditor } from './edgeless-editor'; +import { PageEditor } from './page-editor'; + +export * from './edgeless-editor'; +export * from './page-editor'; + +export function effects() { + customElements.define('page-editor', PageEditor); + customElements.define('edgeless-editor', EdgelessEditor); +} diff --git a/blocksuite/presets/src/editors/page-editor.ts b/packages/frontend/core/src/blocksuite/editors/page-editor.ts similarity index 91% rename from blocksuite/presets/src/editors/page-editor.ts rename to packages/frontend/core/src/blocksuite/editors/page-editor.ts index 1948185a65..d49c712ef1 100644 --- a/blocksuite/presets/src/editors/page-editor.ts +++ b/packages/frontend/core/src/blocksuite/editors/page-editor.ts @@ -2,10 +2,14 @@ import { BlockStdScope, EditorHost, ShadowlessElement, -} from '@blocksuite/block-std'; -import { PageEditorBlockSpecs, ThemeProvider } from '@blocksuite/blocks'; -import { noop, SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; -import type { Store } from '@blocksuite/store'; +} from '@blocksuite/affine/block-std'; +import { PageEditorBlockSpecs, ThemeProvider } from '@blocksuite/affine/blocks'; +import { + noop, + SignalWatcher, + WithDisposable, +} from '@blocksuite/affine/global/utils'; +import type { Store } from '@blocksuite/affine/store'; import { css, html, nothing } from 'lit'; import { property, state } from 'lit/decorators.js'; import { guard } from 'lit/directives/guard.js'; diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx index f0a112e415..5302a4bef3 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx @@ -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; + 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]); diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx index 7bd7917538..0d5f0f926a 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx @@ -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 = { diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts index c5b3d3f00c..8f91c5fecf 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts @@ -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'; diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx index b9423515fe..c657b4a3d0 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx @@ -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, diff --git a/packages/frontend/core/src/components/hooks/affine/use-export-page.ts b/packages/frontend/core/src/components/hooks/affine/use-export-page.ts index 8bb511245c..506fe823a1 100644 --- a/packages/frontend/core/src/components/hooks/affine/use-export-page.ts +++ b/packages/frontend/core/src/components/hooks/affine/use-export-page.ts @@ -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'; diff --git a/packages/frontend/core/src/components/hooks/use-block-suite-editor.ts b/packages/frontend/core/src/components/hooks/use-block-suite-editor.ts index 608b6ee93a..d45498440f 100644 --- a/packages/frontend/core/src/components/hooks/use-block-suite-editor.ts +++ b/packages/frontend/core/src/components/hooks/use-block-suite-editor.ts @@ -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(null); export function useActiveBlocksuiteEditor(): [ diff --git a/packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts b/packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts index 86643b690b..9b3c57133b 100644 --- a/packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts +++ b/packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts @@ -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'; diff --git a/packages/frontend/core/src/components/page-detail-editor.tsx b/packages/frontend/core/src/components/page-detail-editor.tsx index 7936db52f1..ac7fa5d155 100644 --- a/packages/frontend/core/src/components/page-detail-editor.tsx +++ b/packages/frontend/core/src/components/page-detail-editor.tsx @@ -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'; diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx index b998cbf890..be87018e99 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx @@ -3,6 +3,7 @@ import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton'; import type { ChatPanel } from '@affine/core/blocksuite/presets'; import { AIProvider } from '@affine/core/blocksuite/presets'; import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding'; +import type { AffineEditorContainer } from '@affine/core/components/blocksuite/block-suite-editor'; import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer'; import { DocPropertySidebar } from '@affine/core/components/doc-properties/sidebar'; import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper'; @@ -22,7 +23,6 @@ import { type Disposable, DisposableGroup, } from '@blocksuite/affine/global/utils'; -import { type AffineEditorContainer } from '@blocksuite/affine/presets'; import { AiIcon, FrameIcon, diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx index af7f1991ee..0359e195bc 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx @@ -1,4 +1,5 @@ import { ChatPanel } from '@affine/core/blocksuite/presets'; +import type { AffineEditorContainer } from '@affine/core/components/blocksuite/block-suite-editor'; import { createPageModePreviewSpecs } from '@affine/core/components/blocksuite/block-suite-editor/specs/preview'; import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search'; import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta'; @@ -9,7 +10,6 @@ import { DocModeProvider, RefNodeSlotsProvider, } from '@blocksuite/affine/blocks'; -import type { AffineEditorContainer } from '@blocksuite/affine/presets'; import { useFramework } from '@toeverything/infra'; import { forwardRef, useEffect, useRef } from 'react'; diff --git a/packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx b/packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx index 02c6163696..2abec5aae4 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx @@ -1,4 +1,5 @@ import { Scrollable } from '@affine/component'; +import type { AffineEditorContainer } from '@affine/core/components/blocksuite/block-suite-editor'; import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer'; import { useActiveBlocksuiteEditor } from '@affine/core/components/hooks/use-block-suite-editor'; import { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state'; @@ -26,7 +27,6 @@ import { RefNodeSlotsProvider, } from '@blocksuite/affine/blocks'; import { DisposableGroup } from '@blocksuite/affine/global/utils'; -import type { AffineEditorContainer } from '@blocksuite/affine/presets'; import { Logo1Icon } from '@blocksuite/icons/rc'; import { FrameworkScope, useLiveData, useService } from '@toeverything/infra'; import clsx from 'clsx'; diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx index 4b35ef0032..9b055ed0f9 100644 --- a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx +++ b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx @@ -1,6 +1,7 @@ import { useThemeColorV2 } from '@affine/component'; import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton'; import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary'; +import type { AffineEditorContainer } from '@affine/core/components/blocksuite/block-suite-editor'; import { useActiveBlocksuiteEditor } from '@affine/core/components/hooks/use-block-suite-editor'; import { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state'; import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper'; @@ -28,7 +29,6 @@ import { RefNodeSlotsProvider, } from '@blocksuite/affine/blocks'; import { DisposableGroup } from '@blocksuite/affine/global/utils'; -import { type AffineEditorContainer } from '@blocksuite/affine/presets'; import { FrameworkScope, useLiveData, diff --git a/packages/frontend/core/src/modules/editor/entities/editor.ts b/packages/frontend/core/src/modules/editor/entities/editor.ts index 8c156e641e..950f46d040 100644 --- a/packages/frontend/core/src/modules/editor/entities/editor.ts +++ b/packages/frontend/core/src/modules/editor/entities/editor.ts @@ -1,3 +1,4 @@ +import type { AffineEditorContainer } from '@affine/core/components/blocksuite/block-suite-editor'; import type { DefaultOpenProperty } from '@affine/core/components/doc-properties'; import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx'; import { @@ -7,7 +8,6 @@ import { HighlightSelection, type ReferenceParams, } from '@blocksuite/affine/blocks'; -import type { AffineEditorContainer } from '@blocksuite/affine/presets'; import type { InlineEditor } from '@blocksuite/inline'; import { effect } from '@preact/signals-core'; import { Entity, LiveData } from '@toeverything/infra'; diff --git a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx index 15022daa6f..b781d1e41f 100644 --- a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx @@ -2,6 +2,7 @@ import { Scrollable } from '@affine/component'; import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton'; import { AIProvider } from '@affine/core/blocksuite/presets'; import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary'; +import type { AffineEditorContainer } from '@affine/core/components/blocksuite/block-suite-editor'; import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer'; import { PageNotFound } from '@affine/core/desktop/pages/404'; import { EditorService } from '@affine/core/modules/editor'; @@ -14,7 +15,6 @@ import { type Disposable, DisposableGroup, } from '@blocksuite/affine/global/utils'; -import type { AffineEditorContainer } from '@blocksuite/affine/presets'; import { FrameworkScope, useLiveData, diff --git a/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts index e411b82f69..e767e1a690 100644 --- a/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts +++ b/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts @@ -27,7 +27,6 @@ import { type, waitForEditorLoad, } from '@affine-test/kit/utils/page-logic'; -import type { AffineEditorContainer } from '@blocksuite/affine/presets'; import type { EdgelessRootBlockComponent, NoteBlockModel, @@ -294,16 +293,13 @@ test.describe('edgeless note element toolbar', () => { test('note edgeless styles', async ({ page }) => { const getNoteEdgelessProps = async (page: Page, noteId: string) => { const container = locateEditorContainer(page); - return await container.evaluate( - (container: AffineEditorContainer, noteId) => { - const root = container.querySelector( - 'affine-edgeless-root' - ) as EdgelessRootBlockComponent; - const note = root.gfx.getElementById(noteId) as NoteBlockModel; - return note.edgeless; - }, - noteId - ); + return await container.evaluate((container: HTMLElement, noteId) => { + const root = container.querySelector( + 'affine-edgeless-root' + ) as EdgelessRootBlockComponent; + const note = root.gfx.getElementById(noteId) as NoteBlockModel; + return note.edgeless; + }, noteId); }; const toolbar = locateElementToolbar(page); diff --git a/tests/kit/src/utils/editor.ts b/tests/kit/src/utils/editor.ts index b68bbfc3cb..30936fa862 100644 --- a/tests/kit/src/utils/editor.ts +++ b/tests/kit/src/utils/editor.ts @@ -1,7 +1,9 @@ -import type { AffineEditorContainer } from '@blocksuite/affine/presets'; +import type * as BlocksuiteBlocks from '@blocksuite/affine/blocks'; import type { IVec, XYWH } from '@blocksuite/global/utils'; import { expect, type Locator, type Page } from '@playwright/test'; +declare type _GLOBAL_ = typeof BlocksuiteBlocks; + const AFFINE_FORMAT_BAR_WIDGET = 'affine-format-bar-widget'; const EDGELESS_ELEMENT_TOOLBAR_WIDGET = 'edgeless-element-toolbar-widget'; const EDGELESS_TOOLBAR_WIDGET = 'edgeless-toolbar-widget'; @@ -73,7 +75,7 @@ export function locateFormatBar(page: Page, editorIndex = 0) { export async function getEdgelessSelectedIds(page: Page, editorIndex = 0) { const container = locateEditorContainer(page, editorIndex); - return container.evaluate((container: AffineEditorContainer) => { + return container.evaluate(container => { const root = container.querySelector('affine-edgeless-root'); if (!root) { throw new Error('Edgeless root not found'); @@ -100,7 +102,7 @@ export async function getSelectedXYWH( export async function getViewportCenter(page: Page, editorIndex = 0) { const container = locateEditorContainer(page, editorIndex); - return container.evaluate((container: AffineEditorContainer) => { + return container.evaluate(container => { const root = container.querySelector('affine-edgeless-root'); if (!root) { throw new Error('Edgeless root not found'); @@ -115,7 +117,7 @@ export async function setViewportCenter( editorIndex = 0 ) { const container = locateEditorContainer(page, editorIndex); - return container.evaluate((container: AffineEditorContainer, center) => { + return container.evaluate((container, center) => { const root = container.querySelector('affine-edgeless-root'); if (!root) { throw new Error('Edgeless root not found'); @@ -126,7 +128,7 @@ export async function setViewportCenter( export async function setViewportZoom(page: Page, zoom = 1, editorIndex = 0) { const container = locateEditorContainer(page, editorIndex); - return container.evaluate((container: AffineEditorContainer, zoom) => { + return container.evaluate((container, zoom) => { const root = container.querySelector('affine-edgeless-root'); if (!root) { throw new Error('Edgeless root not found'); @@ -141,7 +143,7 @@ export async function setViewportZoom(page: Page, zoom = 1, editorIndex = 0) { */ export async function toViewCoord(page: Page, point: IVec, editorIndex = 0) { const container = locateEditorContainer(page, editorIndex); - return container.evaluate((container: AffineEditorContainer, point) => { + return container.evaluate((container, point) => { const root = container.querySelector('affine-edgeless-root'); if (!root) { throw new Error('Edgeless root not found'); @@ -159,7 +161,7 @@ export async function toViewCoord(page: Page, point: IVec, editorIndex = 0) { */ export async function toModelCoord(page: Page, point: IVec, editorIndex = 0) { const container = locateEditorContainer(page, editorIndex); - return container.evaluate((container: AffineEditorContainer, point) => { + return container.evaluate((container, point) => { const root = container.querySelector('affine-edgeless-root'); if (!root) { throw new Error('Edgeless root not found');