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 29a6b70fe..000000000 --- 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 0f8e2b6c4..000000000 --- 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 c3d3d9612..000000000 --- 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 8fd32baa6..000000000 --- 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 ce9616a52..000000000 --- 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 79d8c3368..000000000 --- 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 e8948eb2f..000000000 --- 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 6c1138ddb..000000000 --- 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 d7ae1fdf0..000000000 --- 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 d53998a7f..000000000 --- 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 c4fc2a09f..7658d44b5 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 7ae0542ba..f4dea70e0 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 0ca846692..00aced7fb 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 6aa7fa268..19994bce1 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 c03aae6f8..364eb2bd0 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 4b91dbda9..976bcb640 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 000000000..4ba445ba8 --- /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 1948185a6..d49c712ef 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 f0a112e41..5302a4bef 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 7bd791753..0d5f0f926 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 c5b3d3f00..8f91c5fec 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 b9423515f..c657b4a3d 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 8bb511245..506fe823a 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 608b6ee93..d45498440 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 86643b690..9b3c57133 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 7936db52f..ac7fa5d15 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 b998cbf89..be87018e9 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 af7f1991e..0359e195b 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 02c616369..2abec5aae 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 4b35ef003..9b055ed0f 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 8c156e641..950f46d04 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 15022daa6..b781d1e41 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 e411b82f6..e767e1a69 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 b68bbfc3c..30936fa86 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');