Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-25 18:26:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): show doc title in page block (#9975)

Browse Source 
Close [BS-2392](https://linear.app/affine-design/issue/BS-2392/page-block-需要显示文章title)

### What Changes
- Add `<doc-title>` to edgeless page block (a.k.a the first page visible note block)
- Refactors:
  - Move `<doc-title>` to `@blocksuite/affine-component`, but you can aslo import it from `@blocksuite/preset`
  - Extract `<edgeless-note-mask>` and `<edgeless-note-background>` from `<affine-edgeless-note>` to a seperate file
  - Rewrite styles of `<affine-edgeless-note>` with `@vanilla-extract/css`

https://github.com/user-attachments/assets/a0c03239-803e-4bfa-b30e-33b919213b12
This commit is contained in:
L-Sun
2025-02-06 21:18:27 +00:00
parent 41107eafae
commit 891d9df0b1
33 changed files with 626 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
blocksuite/tests-legacy/edgeless/note/resize.spec.ts
View File

@@ -94,7 +94,7 @@ test('resize note then collapse note', async ({ page }) => {
{ x: box.x + 50, y: box.y + box.height + 100 }
);
let noteRect = await getNoteRect(page, noteId);
await expect(page.locator('.edgeless-note-collapse-button')).toBeVisible();
await expect(page.getByTestId('edgeless-note-collapse-button')).toBeVisible();
assertRectEqual(noteRect, {
x: initRect.x,
y: initRect.y,
@@ -102,11 +102,11 @@ test('resize note then collapse note', async ({ page }) => {
h: initRect.h + 100,
});
await page.locator('.edgeless-note-collapse-button')!.click();
await page.getByTestId('edgeless-note-collapse-button')!.click();
let domRect = await page.locator('affine-edgeless-note').boundingBox();
expect(domRect!.height).toBeCloseTo(NOTE_MIN_HEIGHT);
await page.locator('.edgeless-note-collapse-button')!.click();
await page.getByTestId('edgeless-note-collapse-button')!.click();
domRect = await page.locator('affine-edgeless-note').boundingBox();
expect(domRect!.height).toBeCloseTo(initRect.h + 100);
@@ -120,7 +120,7 @@ test('resize note then collapse note', async ({ page }) => {
);
noteRect = await getNoteRect(page, noteId);
await expect(
page.locator('.edgeless-note-collapse-button')
page.getByTestId('edgeless-note-collapse-button')
).not.toBeVisible();
assertRectEqual(noteRect, {
x: initRect.x,

2
blocksuite/tests-legacy/edgeless/note/scale.spec.ts
View File

@@ -48,7 +48,7 @@ async function checkNoteScale(
const edgelessNote = page.locator(
`affine-edgeless-note[data-block-id="${noteId}"]`
);
const noteContainer = edgelessNote.locator('.edgeless-note-container');
const noteContainer = edgelessNote.getByTestId('edgeless-note-container');
const style = await noteContainer.getAttribute('style');
if (!style) {

2
blocksuite/tests-legacy/linked-page.spec.ts
View File

@@ -665,6 +665,8 @@ test('linked doc can be dragged from note to surface top level block', async ({
}) => {
await enterPlaygroundRoom(page);
await initEmptyEdgelessState(page);
await focusTitle(page);
await type(page, 'title0');
await focusRichText(page);
await createAndConvertToEmbedLinkedDoc(page);

8
blocksuite/tests-legacy/utils/asserts.ts
View File

@@ -1,5 +1,6 @@
import './declare-test-window.js';
import type { EdgelessNoteBackground } from '@blocksuite/affine-block-note';
import type {
BlockComponent,
EditorHost,
@@ -965,12 +966,13 @@ export async function assertEdgelessNoteBackground(
const backgroundColor = await editor
.locator(`affine-edgeless-note[data-block-id="${noteId}"]`)
.evaluate(ele => {
const noteWrapper =
ele?.querySelector<HTMLDivElement>('.note-background');
const noteWrapper = ele?.querySelector<EdgelessNoteBackground>(
'edgeless-note-background'
);
if (!noteWrapper) {
throw new Error(`Could not find note: ${noteId}`);
}
return noteWrapper.style.backgroundColor;
return noteWrapper.backgroundStyle$.value.backgroundColor;
});
expect(toHex(backgroundColor)).toEqual(color);