Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-27 02:42:25 +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);