refactor(editor): configurable page block title (#10063)

### What changes
- make page block title rendering configurable so that a journal title can be rendered by AFFiNE side.
- move page block render logic to a seperate component

blocksuite/affine/block-note/src/components/edgeless-note-background.ts

@@ -1,13 +1,9 @@
 import {
   DefaultTheme,
   NoteBlockModel,
-  NoteDisplayMode,
   StrokeStyle,
 } from '@blocksuite/affine-model';
-import {
-  FeatureFlagService,
-  ThemeProvider,
-} from '@blocksuite/affine-shared/services';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import {
   getClosestBlockComponentByPoint,
   handleNativeRangeAtPoint,
@@ -37,6 +33,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { isPageBlock } from '../utils';
 import * as styles from './edgeless-note-background.css';
 
 @requiredProperties({
@@ -74,18 +71,6 @@ export class EdgelessNoteBackground extends SignalWatcher(
     return this.std.host.doc;
   }
 
-  private get _isPageBlock() {
-    return (
-      this.std.get(FeatureFlagService).getFlag('enable_page_block') &&
-      // is the first page visible note
-      this.note.parent?.children.find(
-        child =>
-          matchFlavours(child, ['affine:note']) &&
-          child.displayMode !== NoteDisplayMode.EdgelessOnly
-      ) === this.note
-    );
-  }
-
   private _tryAddParagraph(x: number, y: number) {
     const nearest = getClosestBlockComponentByPoint(
       new Point(x, y)
@@ -174,7 +159,7 @@ export class EdgelessNoteBackground extends SignalWatcher(
       @pointerdown=${stopPropagation}
       @click=${this._handleClickAtBackground}
     >
-      ${this._isPageBlock ? this._renderHeader() : nothing}
+      ${isPageBlock(this.std, this.note) ? this._renderHeader() : nothing}
     </div>`;
   }
 

blocksuite/affine/block-note/src/components/edgeless-page-block-title.css.ts

@@ -0,0 +1,9 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const pageBlockTitle = style({
+  position: 'relative',
+});
+
+globalStyle(`${pageBlockTitle} .doc-title-container`, {
+  padding: '26px 0px',
+});

blocksuite/affine/block-note/src/components/edgeless-page-block-title.ts

@@ -0,0 +1,44 @@
+import { NoteBlockModel } from '@blocksuite/affine-model';
+import {
+  type BlockStdScope,
+  PropTypes,
+  requiredProperties,
+  ShadowlessElement,
+  stdContext,
+} from '@blocksuite/block-std';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
+import { consume } from '@lit/context';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { isPageBlock } from '../utils';
+import * as styles from './edgeless-page-block-title.css';
+
+@requiredProperties({
+  note: PropTypes.instanceOf(NoteBlockModel),
+})
+export class EdgelessPageBlockTitle extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  override render() {
+    if (!isPageBlock(this.std, this.note)) return;
+
+    const title = this.std.getConfig('affine:note')?.pageBlockTitle({
+      note: this.note,
+      std: this.std,
+    });
+
+    return html`<div class=${styles.pageBlockTitle}>${title}</div>`;
+  }
+
+  @consume({ context: stdContext })
+  accessor std!: BlockStdScope;
+
+  @property({ attribute: false })
+  accessor note!: NoteBlockModel;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-page-block-title': EdgelessPageBlockTitle;
+  }
+}