nodejs/AFFiNE
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-03-13 09:43:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): move editor components to frontend core (#10335)

Browse Source 
### 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:
Saul-Mirone
2025-02-21 04:28:54 +00:00
parent 7f833f8c15
commit adcc6b578c
34 changed files with 102 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
blocksuite/playground/examples/basic/edgeless/index.html
View File

@@ -1,23 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic EdgelessEditor Example</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: var(--affine-white-90);
transition: background-color 0.3s;
}
</style>
</head>
<body>
<script type="module" src="./main.ts"></script>
</body>
</html>

15
blocksuite/playground/examples/basic/edgeless/main.ts
View File

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

23
blocksuite/playground/examples/basic/page/index.html
View File

@@ -1,23 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic PageEditor Example</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: var(--affine-white-90);
transition: background-color 0.3s;
}
</style>
</head>
<body>
<script type="module" src="./main.ts"></script>
</body>
</html>

20
blocksuite/playground/examples/basic/page/main.ts
View File

@@ -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!') });

23
blocksuite/playground/examples/multiple-editors/edgeless-edgeless/index.html
View File

@@ -1,23 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edgeless+Edgeless Multiple-Editors Example</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: var(--affine-white-90);
transition: background-color 0.3s;
}
</style>
</head>
<body>
<script type="module" src="./main.ts"></script>
</body>
</html>

30
blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts
View File

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

23
blocksuite/playground/examples/multiple-editors/page-edgeless/index.html
View File

@@ -1,23 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Doc+Edgeless Multiple-Editors Example</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: var(--affine-white-90);
transition: background-color 0.3s;
}
</style>
</head>
<body>
<script type="module" src="./main.ts"></script>
</body>
</html>

30
blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts
View File

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

23
blocksuite/playground/examples/multiple-editors/page-page/index.html
View File

@@ -1,23 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Doc+Doc Multiple-Editors Example</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: var(--affine-white-90);
transition: background-color 0.3s;
}
</style>
</head>
<body>
<script type="module" src="./main.ts"></script>
</body>
</html>

30
blocksuite/playground/examples/multiple-editors/page-page/main.ts
View File

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

13
blocksuite/playground/index.html
View File

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

20
blocksuite/playground/vite.config.ts
View File

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

2
blocksuite/presets/src/editors/index.ts
View File

@@ -1,3 +1 @@
export * from './edgeless-editor.js';
export * from './editor-container.js';
export * from './page-editor.js';

8
blocksuite/presets/src/effects.ts
View File

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

11
blocksuite/tests-legacy/e2e/utils/inline-editor.ts
View File

@@ -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<string> {
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]
);
}

11
blocksuite/presets/src/editors/edgeless-editor.ts → packages/frontend/core/src/blocksuite/editors/edgeless-editor.ts
View File

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

10
packages/frontend/core/src/blocksuite/editors/index.ts Normal file
View File

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

12
blocksuite/presets/src/editors/page-editor.ts → packages/frontend/core/src/blocksuite/editors/page-editor.ts
View File

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

33
packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
View File

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

6
packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx
View File

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

3
packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts
View File

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

2
packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
View File

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

2
packages/frontend/core/src/components/hooks/affine/use-export-page.ts
View File

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

3
packages/frontend/core/src/components/hooks/use-block-suite-editor.ts
View File

@@ -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(): [

2
packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts
View File

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

2
packages/frontend/core/src/components/page-detail-editor.tsx
View File

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

2
packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx
View File

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

2
packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx
View File

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

2
packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx
View File

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

2
packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
View File

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

2
packages/frontend/core/src/modules/editor/entities/editor.ts
View File

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

2
packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
View File

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

18
tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
View File

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

16
tests/kit/src/utils/editor.ts
View File

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