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

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:28 +00:00
parent 41107eafae
commit 891d9df0b1
33 changed files with 626 additions and 337 deletions
@@ -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,