Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-24 04:27:27 +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
blocksuite/playground/examples/basic/edgeless/index.html
-23
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>
blocksuite/playground/examples/basic/edgeless/main.ts
-15
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);
blocksuite/playground/examples/basic/page/index.html
-23
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>
blocksuite/playground/examples/basic/page/main.ts
-20
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!') });
blocksuite/playground/examples/multiple-editors/edgeless-edgeless/index.html
-23
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>
blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts
-30
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);
blocksuite/playground/examples/multiple-editors/page-edgeless/index.html
-23
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>
blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts
-30
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);
blocksuite/playground/examples/multiple-editors/page-page/index.html
-23
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>
blocksuite/playground/examples/multiple-editors/page-page/main.ts
-30
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);
blocksuite/playground/index.html
+13
View File
@@ -44,6 +44,19 @@
margin-top: 0px; margin-top: 0px;
} }
} }
affine-editor-container {
display: block;
height: 100%;
}
.affine-page-viewport {
height: 100%;
}
.playground-page-editor-container {
height: 100%;
}
</style> </style>
</head> </head>
blocksuite/playground/vite.config.ts
-20
View File
@@ -99,26 +99,6 @@ export default defineConfig(({ mode }) => {
}, },
input: { input: {
main: resolve(__dirname, 'index.html'), 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'), 'examples/inline': resolve(__dirname, 'examples/inline/index.html'),
}, },
treeshake: true, treeshake: true,
blocksuite/presets/src/editors/index.ts
-2
View File
@@ -1,3 +1 @@
export * from './edgeless-editor.js';
export * from './editor-container.js'; export * from './editor-container.js';
export * from './page-editor.js';
blocksuite/presets/src/effects.ts
+1 -7
View File
@@ -1,18 +1,12 @@
import '@blocksuite/affine-shared/commands'; import '@blocksuite/affine-shared/commands';
import '@blocksuite/blocks/effects'; import '@blocksuite/blocks/effects';
import { import { AffineEditorContainer } from './editors/index.js';
AffineEditorContainer,
EdgelessEditor,
PageEditor,
} from './editors/index.js';
import { CommentInput } from './fragments/comment/comment-input.js'; import { CommentInput } from './fragments/comment/comment-input.js';
import { CommentPanel } from './fragments/index.js'; import { CommentPanel } from './fragments/index.js';
export function effects() { export function effects() {
customElements.define('page-editor', PageEditor);
customElements.define('comment-input', CommentInput); customElements.define('comment-input', CommentInput);
customElements.define('comment-panel', CommentPanel); customElements.define('comment-panel', CommentPanel);
customElements.define('affine-editor-container', AffineEditorContainer); customElements.define('affine-editor-container', AffineEditorContainer);
customElements.define('edgeless-editor', EdgelessEditor);
} }
blocksuite/tests-legacy/e2e/utils/inline-editor.ts
+4 -7
View File
@@ -1,17 +1,14 @@
import type { Page } from '@playwright/test'; import type { Page } from '@playwright/test';
import { currentEditorIndex } from './multiple-editor.js';
export async function getStringFromRichText( export async function getStringFromRichText(
page: Page, page: Page,
index = 0 index = 0
): Promise<string> { ): Promise<string> {
await page.waitForTimeout(50); await page.waitForTimeout(50);
return page.evaluate( return page.evaluate(
([index, currentEditorIndex]) => { ([index]) => {
const editorHost = const editorHost = document.querySelector('editor-host');
document.querySelectorAll('editor-host')[currentEditorIndex]; const richTexts = editorHost?.querySelectorAll('rich-text');
const richTexts = editorHost.querySelectorAll('rich-text');
if (!richTexts) { if (!richTexts) {
throw new Error('Cannot find rich-text'); throw new Error('Cannot find rich-text');
@@ -20,6 +17,6 @@ export async function getStringFromRichText(
const editor = (richTexts[index] as any).inlineEditor; const editor = (richTexts[index] as any).inlineEditor;
return editor.yText.toString(); return editor.yText.toString();
}, },
[index, currentEditorIndex] [index]
); );
} }
blocksuite/presets/src/editors/edgeless-editor.ts → packages/frontend/core/src/blocksuite/editors/edgeless-editor.ts
+7 -4
View File
@@ -1,7 +1,10 @@
import { BlockStdScope, ShadowlessElement } from '@blocksuite/block-std'; import { BlockStdScope, ShadowlessElement } from '@blocksuite/affine/block-std';
import { EdgelessEditorBlockSpecs, ThemeProvider } from '@blocksuite/blocks'; import {
import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; EdgelessEditorBlockSpecs,
import type { Store } from '@blocksuite/store'; 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 { css, html, nothing, type TemplateResult } from 'lit';
import { property, state } from 'lit/decorators.js'; import { property, state } from 'lit/decorators.js';
import { guard } from 'lit/directives/guard.js'; import { guard } from 'lit/directives/guard.js';
packages/frontend/core/src/blocksuite/editors/index.ts
+10
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);
}
blocksuite/presets/src/editors/page-editor.ts → packages/frontend/core/src/blocksuite/editors/page-editor.ts
+8 -4
View File
@@ -2,10 +2,14 @@ import {
BlockStdScope, BlockStdScope,
EditorHost, EditorHost,
ShadowlessElement, ShadowlessElement,
} from '@blocksuite/block-std'; } from '@blocksuite/affine/block-std';
import { PageEditorBlockSpecs, ThemeProvider } from '@blocksuite/blocks'; import { PageEditorBlockSpecs, ThemeProvider } from '@blocksuite/affine/blocks';
import { noop, SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import {
import type { Store } from '@blocksuite/store'; noop,
SignalWatcher,
WithDisposable,
} from '@blocksuite/affine/global/utils';
import type { Store } from '@blocksuite/affine/store';
import { css, html, nothing } from 'lit'; import { css, html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js'; import { property, state } from 'lit/decorators.js';
import { guard } from 'lit/directives/guard.js'; import { guard } from 'lit/directives/guard.js';
packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
+24 -9
View File
@@ -1,16 +1,17 @@
import type {
EdgelessEditor,
PageEditor,
} from '@affine/core/blocksuite/editors';
import { FeatureFlagService } from '@affine/core/modules/feature-flag'; import { FeatureFlagService } from '@affine/core/modules/feature-flag';
import type { BlockStdScope, EditorHost } from '@blocksuite/affine/block-std';
import { import {
appendParagraphCommand, appendParagraphCommand,
type DocMode, type DocMode,
type DocTitle, type DocTitle,
focusBlockEnd, focusBlockEnd,
getLastNoteBlock, getLastNoteBlock,
type RootBlockModel,
} from '@blocksuite/affine/blocks'; } from '@blocksuite/affine/blocks';
import type {
AffineEditorContainer,
EdgelessEditor,
PageEditor,
} from '@blocksuite/affine/presets';
import { type Store } from '@blocksuite/affine/store'; import { type Store } from '@blocksuite/affine/store';
import { useLiveData, useService } from '@toeverything/infra'; import { useLiveData, useService } from '@toeverything/infra';
import clsx from 'clsx'; import clsx from 'clsx';
@@ -37,6 +38,18 @@ interface BlocksuiteEditorContainerProps {
style?: React.CSSProperties; 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< export const BlocksuiteEditorContainer = forwardRef<
AffineEditorContainer, AffineEditorContainer,
BlocksuiteEditorContainerProps BlocksuiteEditorContainerProps
@@ -66,9 +79,11 @@ export const BlocksuiteEditorContainer = forwardRef<
return docTitleRef.current; return docTitleRef.current;
}, },
get host() { get host() {
return mode === 'page' return (
? docRef.current?.host (mode === 'page'
: edgelessRef.current?.host; ? docRef.current?.host
: edgelessRef.current?.host) ?? null
);
}, },
get model() { get model() {
return page.root as any; return page.root as any;
@@ -110,7 +125,7 @@ export const BlocksuiteEditorContainer = forwardRef<
} }
return undefined; return undefined;
}, },
}) as unknown as AffineEditorContainer & { origin: HTMLDivElement }; }) as AffineEditorContainer;
return proxy; return proxy;
}, [mode, page]); }, [mode, page]);
packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx
+4 -2
View File
@@ -12,7 +12,6 @@ import {
LinkPreviewerService, LinkPreviewerService,
} from '@blocksuite/affine/blocks'; } from '@blocksuite/affine/blocks';
import { DisposableGroup } from '@blocksuite/affine/global/utils'; import { DisposableGroup } from '@blocksuite/affine/global/utils';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import type { Store } from '@blocksuite/affine/store'; import type { Store } from '@blocksuite/affine/store';
import { Slot } from '@radix-ui/react-slot'; import { Slot } from '@radix-ui/react-slot';
import { useLiveData, useService } from '@toeverything/infra'; import { useLiveData, useService } from '@toeverything/infra';
@@ -21,7 +20,10 @@ import type { CSSProperties } from 'react';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import type { DefaultOpenProperty } from '../../doc-properties'; 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'; import { NoPageRootError } from './no-page-error';
export type EditorProps = { export type EditorProps = {
packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts
+3
View File
@@ -1,3 +1,4 @@
import { effects as editorEffects } from '@affine/core/blocksuite/editors';
import { registerBlocksuitePresetsCustomComponents } from '@affine/core/blocksuite/presets/effects'; import { registerBlocksuitePresetsCustomComponents } from '@affine/core/blocksuite/presets/effects';
import { effects as bsEffects } from '@blocksuite/affine/effects'; import { effects as bsEffects } from '@blocksuite/affine/effects';
@@ -6,7 +7,9 @@ import { effects as patchEffects } from './specs/preview';
bsEffects(); bsEffects();
patchEffects(); patchEffects();
editorEffects();
edgelessEffects(); edgelessEffects();
registerBlocksuitePresetsCustomComponents(); registerBlocksuitePresetsCustomComponents();
export * from './blocksuite-editor'; export * from './blocksuite-editor';
export * from './blocksuite-editor-container';
packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+1 -1
View File
@@ -3,6 +3,7 @@ import {
useConfirmModal, useConfirmModal,
useLitPortalFactory, useLitPortalFactory,
} from '@affine/component'; } from '@affine/component';
import { EdgelessEditor, PageEditor } from '@affine/core/blocksuite/editors';
import type { DocCustomPropertyInfo } from '@affine/core/modules/db'; import type { DocCustomPropertyInfo } from '@affine/core/modules/db';
import { DocService, DocsService } from '@affine/core/modules/doc'; import { DocService, DocsService } from '@affine/core/modules/doc';
import type { import type {
@@ -27,7 +28,6 @@ import {
slashMenuWidget, slashMenuWidget,
surfaceRefToolbarWidget, surfaceRefToolbarWidget,
} from '@blocksuite/affine/blocks'; } from '@blocksuite/affine/blocks';
import { EdgelessEditor, PageEditor } from '@blocksuite/affine/presets';
import type { Store } from '@blocksuite/affine/store'; import type { Store } from '@blocksuite/affine/store';
import { import {
useFramework, useFramework,
packages/frontend/core/src/components/hooks/affine/use-export-page.ts
+1 -1
View File
@@ -21,12 +21,12 @@ import {
titleMiddleware, titleMiddleware,
ZipTransformer, ZipTransformer,
} from '@blocksuite/affine/blocks'; } from '@blocksuite/affine/blocks';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import { type Store, Transformer } from '@blocksuite/affine/store'; import { type Store, Transformer } from '@blocksuite/affine/store';
import { useLiveData, useService } from '@toeverything/infra'; import { useLiveData, useService } from '@toeverything/infra';
import { useSetAtom } from 'jotai'; import { useSetAtom } from 'jotai';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import type { AffineEditorContainer } from '../../blocksuite/block-suite-editor/blocksuite-editor-container';
import { useAsyncCallback } from '../affine-async-hooks'; import { useAsyncCallback } from '../affine-async-hooks';
type ExportType = 'pdf' | 'html' | 'png' | 'markdown' | 'snapshot'; type ExportType = 'pdf' | 'html' | 'png' | 'markdown' | 'snapshot';
packages/frontend/core/src/components/hooks/use-block-suite-editor.ts
+2 -1
View File
@@ -1,7 +1,8 @@
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import type { SetStateAction } from 'jotai'; import type { SetStateAction } from 'jotai';
import { atom, useAtom } from 'jotai'; import { atom, useAtom } from 'jotai';
import type { AffineEditorContainer } from '../blocksuite/block-suite-editor';
const activeEditorContainerAtom = atom<AffineEditorContainer | null>(null); const activeEditorContainerAtom = atom<AffineEditorContainer | null>(null);
export function useActiveBlocksuiteEditor(): [ export function useActiveBlocksuiteEditor(): [
packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts
+1 -1
View File
@@ -9,7 +9,6 @@ import { UrlService } from '@affine/core/modules/url';
import { WorkspaceService } from '@affine/core/modules/workspace'; import { WorkspaceService } from '@affine/core/modules/workspace';
import { useI18n } from '@affine/i18n'; import { useI18n } from '@affine/i18n';
import { TextSelection } from '@blocksuite/affine/block-std'; import { TextSelection } from '@blocksuite/affine/block-std';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import { useService, useServiceOptional } from '@toeverything/infra'; import { useService, useServiceOptional } from '@toeverything/infra';
import { useStore } from 'jotai'; import { useStore } from 'jotai';
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
@@ -29,6 +28,7 @@ import {
import { usePageHelper } from '../../components/blocksuite/block-suite-page-list/utils'; import { usePageHelper } from '../../components/blocksuite/block-suite-page-list/utils';
import { EditorSettingService } from '../../modules/editor-setting'; import { EditorSettingService } from '../../modules/editor-setting';
import { CMDKQuickSearchService } from '../../modules/quicksearch/services/cmdk'; import { CMDKQuickSearchService } from '../../modules/quicksearch/services/cmdk';
import type { AffineEditorContainer } from '../blocksuite/block-suite-editor';
import { useActiveBlocksuiteEditor } from './use-block-suite-editor'; import { useActiveBlocksuiteEditor } from './use-block-suite-editor';
import { useNavigateHelper } from './use-navigate-helper'; import { useNavigateHelper } from './use-navigate-helper';
packages/frontend/core/src/components/page-detail-editor.tsx
+1 -1
View File
@@ -1,6 +1,5 @@
import './page-detail-editor.css'; import './page-detail-editor.css';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import { useLiveData, useService } from '@toeverything/infra'; import { useLiveData, useService } from '@toeverything/infra';
import clsx from 'clsx'; import clsx from 'clsx';
import { useEffect } from 'react'; import { useEffect } from 'react';
@@ -8,6 +7,7 @@ import { useEffect } from 'react';
import { DocService } from '../modules/doc'; import { DocService } from '../modules/doc';
import { EditorService } from '../modules/editor'; import { EditorService } from '../modules/editor';
import { EditorSettingService } from '../modules/editor-setting'; import { EditorSettingService } from '../modules/editor-setting';
import type { AffineEditorContainer } from './blocksuite/block-suite-editor';
import { BlockSuiteEditor } from './blocksuite/block-suite-editor'; import { BlockSuiteEditor } from './blocksuite/block-suite-editor';
import * as styles from './page-detail-editor.css'; import * as styles from './page-detail-editor.css';
packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx
+1 -1
View File
@@ -3,6 +3,7 @@ import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
import type { ChatPanel } from '@affine/core/blocksuite/presets'; import type { ChatPanel } from '@affine/core/blocksuite/presets';
import { AIProvider } from '@affine/core/blocksuite/presets'; import { AIProvider } from '@affine/core/blocksuite/presets';
import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding'; 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 { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
import { DocPropertySidebar } from '@affine/core/components/doc-properties/sidebar'; import { DocPropertySidebar } from '@affine/core/components/doc-properties/sidebar';
import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper'; import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
@@ -22,7 +23,6 @@ import {
type Disposable, type Disposable,
DisposableGroup, DisposableGroup,
} from '@blocksuite/affine/global/utils'; } from '@blocksuite/affine/global/utils';
import { type AffineEditorContainer } from '@blocksuite/affine/presets';
import { import {
AiIcon, AiIcon,
FrameIcon, FrameIcon,
packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx
+1 -1
View File
@@ -1,4 +1,5 @@
import { ChatPanel } from '@affine/core/blocksuite/presets'; 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 { createPageModePreviewSpecs } from '@affine/core/components/blocksuite/block-suite-editor/specs/preview';
import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search'; import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search';
import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta'; import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
@@ -9,7 +10,6 @@ import {
DocModeProvider, DocModeProvider,
RefNodeSlotsProvider, RefNodeSlotsProvider,
} from '@blocksuite/affine/blocks'; } from '@blocksuite/affine/blocks';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import { useFramework } from '@toeverything/infra'; import { useFramework } from '@toeverything/infra';
import { forwardRef, useEffect, useRef } from 'react'; import { forwardRef, useEffect, useRef } from 'react';
packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx
+1 -1
View File
@@ -1,4 +1,5 @@
import { Scrollable } from '@affine/component'; 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 { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
import { useActiveBlocksuiteEditor } from '@affine/core/components/hooks/use-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 { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state';
@@ -26,7 +27,6 @@ import {
RefNodeSlotsProvider, RefNodeSlotsProvider,
} from '@blocksuite/affine/blocks'; } from '@blocksuite/affine/blocks';
import { DisposableGroup } from '@blocksuite/affine/global/utils'; import { DisposableGroup } from '@blocksuite/affine/global/utils';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import { Logo1Icon } from '@blocksuite/icons/rc'; import { Logo1Icon } from '@blocksuite/icons/rc';
import { FrameworkScope, useLiveData, useService } from '@toeverything/infra'; import { FrameworkScope, useLiveData, useService } from '@toeverything/infra';
import clsx from 'clsx'; import clsx from 'clsx';
packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
+1 -1
View File
@@ -1,6 +1,7 @@
import { useThemeColorV2 } from '@affine/component'; import { useThemeColorV2 } from '@affine/component';
import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton'; import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary'; 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 { useActiveBlocksuiteEditor } from '@affine/core/components/hooks/use-block-suite-editor';
import { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state'; import { usePageDocumentTitle } from '@affine/core/components/hooks/use-global-state';
import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper'; import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
@@ -28,7 +29,6 @@ import {
RefNodeSlotsProvider, RefNodeSlotsProvider,
} from '@blocksuite/affine/blocks'; } from '@blocksuite/affine/blocks';
import { DisposableGroup } from '@blocksuite/affine/global/utils'; import { DisposableGroup } from '@blocksuite/affine/global/utils';
import { type AffineEditorContainer } from '@blocksuite/affine/presets';
import { import {
FrameworkScope, FrameworkScope,
useLiveData, useLiveData,
packages/frontend/core/src/modules/editor/entities/editor.ts
+1 -1
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 type { DefaultOpenProperty } from '@affine/core/components/doc-properties';
import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx'; import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
import { import {
@@ -7,7 +8,6 @@ import {
HighlightSelection, HighlightSelection,
type ReferenceParams, type ReferenceParams,
} from '@blocksuite/affine/blocks'; } from '@blocksuite/affine/blocks';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import type { InlineEditor } from '@blocksuite/inline'; import type { InlineEditor } from '@blocksuite/inline';
import { effect } from '@preact/signals-core'; import { effect } from '@preact/signals-core';
import { Entity, LiveData } from '@toeverything/infra'; import { Entity, LiveData } from '@toeverything/infra';
packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
+1 -1
View File
@@ -2,6 +2,7 @@ import { Scrollable } from '@affine/component';
import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton'; import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
import { AIProvider } from '@affine/core/blocksuite/presets'; import { AIProvider } from '@affine/core/blocksuite/presets';
import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary'; 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 { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
import { PageNotFound } from '@affine/core/desktop/pages/404'; import { PageNotFound } from '@affine/core/desktop/pages/404';
import { EditorService } from '@affine/core/modules/editor'; import { EditorService } from '@affine/core/modules/editor';
@@ -14,7 +15,6 @@ import {
type Disposable, type Disposable,
DisposableGroup, DisposableGroup,
} from '@blocksuite/affine/global/utils'; } from '@blocksuite/affine/global/utils';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import { import {
FrameworkScope, FrameworkScope,
useLiveData, useLiveData,
tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
+7 -11
View File
@@ -27,7 +27,6 @@ import {
type, type,
waitForEditorLoad, waitForEditorLoad,
} from '@affine-test/kit/utils/page-logic'; } from '@affine-test/kit/utils/page-logic';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import type { import type {
EdgelessRootBlockComponent, EdgelessRootBlockComponent,
NoteBlockModel, NoteBlockModel,
@@ -294,16 +293,13 @@ test.describe('edgeless note element toolbar', () => {
test('note edgeless styles', async ({ page }) => { test('note edgeless styles', async ({ page }) => {
const getNoteEdgelessProps = async (page: Page, noteId: string) => { const getNoteEdgelessProps = async (page: Page, noteId: string) => {
const container = locateEditorContainer(page); const container = locateEditorContainer(page);
return await container.evaluate( return await container.evaluate((container: HTMLElement, noteId) => {
(container: AffineEditorContainer, noteId) => { const root = container.querySelector(
const root = container.querySelector( 'affine-edgeless-root'
'affine-edgeless-root' ) as EdgelessRootBlockComponent;
) as EdgelessRootBlockComponent; const note = root.gfx.getElementById(noteId) as NoteBlockModel;
const note = root.gfx.getElementById(noteId) as NoteBlockModel; return note.edgeless;
return note.edgeless; }, noteId);
},
noteId
);
}; };
const toolbar = locateElementToolbar(page); const toolbar = locateElementToolbar(page);
tests/kit/src/utils/editor.ts
+9 -7
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 type { IVec, XYWH } from '@blocksuite/global/utils';
import { expect, type Locator, type Page } from '@playwright/test'; import { expect, type Locator, type Page } from '@playwright/test';
declare type _GLOBAL_ = typeof BlocksuiteBlocks;
const AFFINE_FORMAT_BAR_WIDGET = 'affine-format-bar-widget'; const AFFINE_FORMAT_BAR_WIDGET = 'affine-format-bar-widget';
const EDGELESS_ELEMENT_TOOLBAR_WIDGET = 'edgeless-element-toolbar-widget'; const EDGELESS_ELEMENT_TOOLBAR_WIDGET = 'edgeless-element-toolbar-widget';
const EDGELESS_TOOLBAR_WIDGET = 'edgeless-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) { export async function getEdgelessSelectedIds(page: Page, editorIndex = 0) {
const container = locateEditorContainer(page, editorIndex); const container = locateEditorContainer(page, editorIndex);
return container.evaluate((container: AffineEditorContainer) => { return container.evaluate(container => {
const root = container.querySelector('affine-edgeless-root'); const root = container.querySelector('affine-edgeless-root');
if (!root) { if (!root) {
throw new Error('Edgeless root not found'); throw new Error('Edgeless root not found');
@@ -100,7 +102,7 @@ export async function getSelectedXYWH(
export async function getViewportCenter(page: Page, editorIndex = 0) { export async function getViewportCenter(page: Page, editorIndex = 0) {
const container = locateEditorContainer(page, editorIndex); const container = locateEditorContainer(page, editorIndex);
return container.evaluate((container: AffineEditorContainer) => { return container.evaluate(container => {
const root = container.querySelector('affine-edgeless-root'); const root = container.querySelector('affine-edgeless-root');
if (!root) { if (!root) {
throw new Error('Edgeless root not found'); throw new Error('Edgeless root not found');
@@ -115,7 +117,7 @@ export async function setViewportCenter(
editorIndex = 0 editorIndex = 0
) { ) {
const container = locateEditorContainer(page, editorIndex); const container = locateEditorContainer(page, editorIndex);
return container.evaluate((container: AffineEditorContainer, center) => { return container.evaluate((container, center) => {
const root = container.querySelector('affine-edgeless-root'); const root = container.querySelector('affine-edgeless-root');
if (!root) { if (!root) {
throw new Error('Edgeless root not found'); 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) { export async function setViewportZoom(page: Page, zoom = 1, editorIndex = 0) {
const container = locateEditorContainer(page, editorIndex); const container = locateEditorContainer(page, editorIndex);
return container.evaluate((container: AffineEditorContainer, zoom) => { return container.evaluate((container, zoom) => {
const root = container.querySelector('affine-edgeless-root'); const root = container.querySelector('affine-edgeless-root');
if (!root) { if (!root) {
throw new Error('Edgeless root not found'); 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) { export async function toViewCoord(page: Page, point: IVec, editorIndex = 0) {
const container = locateEditorContainer(page, editorIndex); const container = locateEditorContainer(page, editorIndex);
return container.evaluate((container: AffineEditorContainer, point) => { return container.evaluate((container, point) => {
const root = container.querySelector('affine-edgeless-root'); const root = container.querySelector('affine-edgeless-root');
if (!root) { if (!root) {
throw new Error('Edgeless root not found'); 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) { export async function toModelCoord(page: Page, point: IVec, editorIndex = 0) {
const container = locateEditorContainer(page, editorIndex); const container = locateEditorContainer(page, editorIndex);
return container.evaluate((container: AffineEditorContainer, point) => { return container.evaluate((container, point) => {
const root = container.querySelector('affine-edgeless-root'); const root = container.querySelector('affine-edgeless-root');
if (!root) { if (!root) {
throw new Error('Edgeless root not found'); throw new Error('Edgeless root not found');