refactor(editor): remove global types in config (#10143)

Closes: [BS-2554](https://linear.app/affine-design/issue/BS-2554/remove-global-types-in-block-config)

blocksuite/affine/block-code/src/code-block-config.ts

@@ -1,3 +1,4 @@
+import { ConfigExtensionFactory } from '@blocksuite/block-std';
 import type { BundledLanguageInfo, ThemeInput } from 'shiki';
 
 export interface CodeBlockConfig {
@@ -13,3 +14,6 @@ export interface CodeBlockConfig {
    */
   showLineNumbers?: boolean;
 }
+
+export const CodeBlockConfigExtension =
+  ConfigExtensionFactory<CodeBlockConfig>('affine:code');

blocksuite/affine/block-code/src/code-block-service.ts

@@ -12,6 +12,7 @@ import {
 } from 'shiki';
 import getWasm from 'shiki/wasm';
 
+import { CodeBlockConfigExtension } from './code-block-config.js';
 import {
   CODE_BLOCK_DEFAULT_DARK_THEME,
   CODE_BLOCK_DEFAULT_LIGHT_THEME,
@@ -27,7 +28,10 @@ export class CodeBlockService extends BlockService {
   highlighter$: Signal<HighlighterCore | null> = signal(null);
 
   get langs() {
-    return this.std.getConfig('affine:code')?.langs ?? bundledLanguagesInfo;
+    return (
+      this.std.getOptional(CodeBlockConfigExtension.identifier)?.langs ??
+      bundledLanguagesInfo
+    );
   }
 
   get themeKey() {
@@ -46,7 +50,9 @@ export class CodeBlockService extends BlockService {
       engine: createOnigurumaEngine(() => getWasm),
     })
       .then(async highlighter => {
-        const config = this.std.getConfig('affine:code');
+        const config = this.std.getOptional(
+          CodeBlockConfigExtension.identifier
+        );
         const darkTheme = config?.theme?.dark ?? CODE_BLOCK_DEFAULT_DARK_THEME;
         const lightTheme =
           config?.theme?.light ?? CODE_BLOCK_DEFAULT_LIGHT_THEME;

blocksuite/affine/block-code/src/code-block.ts

@@ -32,6 +32,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import type { ThemedToken } from 'shiki';
 
 import { CodeClipboardController } from './clipboard/index.js';
+import { CodeBlockConfigExtension } from './code-block-config.js';
 import { CodeBlockInlineManagerExtension } from './code-block-inline.js';
 import type { CodeBlockService } from './code-block-service.js';
 import { codeBlockStyles } from './styles.js';
@@ -383,7 +384,8 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
 
   override renderBlock(): TemplateResult<1> {
     const showLineNumbers =
-      this.std.getConfig('affine:code')?.showLineNumbers ?? true;
+      this.std.getOptional(CodeBlockConfigExtension.identifier)
+        ?.showLineNumbers ?? true;
 
     return html`
       <div

blocksuite/affine/block-code/src/effects.ts

@@ -1,5 +1,4 @@
 import { CodeBlockComponent } from './code-block';
-import type { CodeBlockConfig } from './code-block-config';
 import {
   AFFINE_CODE_TOOLBAR_WIDGET,
   AffineCodeToolbarWidget,
@@ -17,12 +16,6 @@ export function effects() {
 }
 
 declare global {
-  namespace BlockSuite {
-    interface BlockConfigs {
-      'affine:code': CodeBlockConfig;
-    }
-  }
-
   interface HTMLElementTagNameMap {
     'language-list-button': LanguageListButton;
     'affine-code-toolbar': AffineCodeToolbar;

blocksuite/affine/block-database/src/config.ts

@@ -1,6 +1,10 @@
 import type { MenuOptions } from '@blocksuite/affine-components/context-menu';
 import { type DatabaseBlockModel } from '@blocksuite/affine-model';
+import { ConfigExtensionFactory } from '@blocksuite/block-std';
 
 export interface DatabaseOptionsConfig {
   configure: (model: DatabaseBlockModel, options: MenuOptions) => MenuOptions;
 }
+
+export const DatabaseConfigExtension =
+  ConfigExtensionFactory<DatabaseOptionsConfig>('affine:database');

blocksuite/affine/block-database/src/database-block.ts

@@ -48,7 +48,10 @@ import { computed, signal } from '@preact/signals-core';
 import { css, html, nothing, unsafeCSS } from 'lit';
 
 import { popSideDetail } from './components/layout.js';
-import type { DatabaseOptionsConfig } from './config.js';
+import {
+  DatabaseConfigExtension,
+  type DatabaseOptionsConfig,
+} from './config.js';
 import { HostContextKey } from './context/host-context.js';
 import { DatabaseBlockDataSource } from './data-source.js';
 import { BlockRenderer } from './detail-panel/block-renderer.js';
@@ -343,7 +346,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
   get optionsConfig(): DatabaseOptionsConfig {
     return {
       configure: (_model, options) => options,
-      ...this.std.getConfig('affine:database'),
+      ...this.std.getOptional(DatabaseConfigExtension.identifier),
     };
   }
 

blocksuite/affine/block-database/src/effects.ts

@@ -1,6 +1,5 @@
 import { CenterPeek } from './components/layout';
 import { DatabaseTitle } from './components/title';
-import type { DatabaseOptionsConfig } from './config';
 import { DatabaseBlockComponent } from './database-block';
 import { BlockRenderer } from './detail-panel/block-renderer';
 import { NoteRenderer } from './detail-panel/note-renderer';
@@ -37,11 +36,3 @@ export function effects() {
   customElements.define('affine-database-link-node', LinkNode);
   customElements.define('affine-database', DatabaseBlockComponent);
 }
-
-declare global {
-  namespace BlockSuite {
-    interface BlockConfigs {
-      'affine:database': Partial<DatabaseOptionsConfig>;
-    }
-  }
-}

blocksuite/affine/block-database/src/index.ts

@@ -1,6 +1,6 @@
 export * from './adapters';
 export * from './commands';
-export type { DatabaseOptionsConfig } from './config';
+export * from './config';
 export * from './data-source';
 export * from './database-block';
 export * from './database-spec';

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

@@ -35,6 +35,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { NoteConfigExtension } from '../config';
 import { isPageBlock } from '../utils';
 import * as styles from './edgeless-note-background.css';
 
@@ -148,7 +149,7 @@ export class EdgelessNoteBackground extends SignalWatcher(
 
   private _renderHeader() {
     const header = this.std
-      .getConfig('affine:note')
+      .getOptional(NoteConfigExtension.identifier)
       ?.edgelessNoteHeader({ note: this.note, std: this.std });
 
     return header;

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

@@ -11,6 +11,7 @@ import { consume } from '@lit/context';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 
+import { NoteConfigExtension } from '../config';
 import { isPageBlock } from '../utils';
 import * as styles from './edgeless-page-block-title.css';
 
@@ -23,10 +24,12 @@ export class EdgelessPageBlockTitle extends SignalWatcher(
   override render() {
     if (!isPageBlock(this.std, this.note)) return;
 
-    const title = this.std.getConfig('affine:note')?.pageBlockTitle({
-      note: this.note,
-      std: this.std,
-    });
+    const title = this.std
+      .getOptional(NoteConfigExtension.identifier)
+      ?.pageBlockTitle({
+        note: this.note,
+        std: this.std,
+      });
 
     return html`<div class=${styles.pageBlockTitle}>${title}</div>`;
   }

blocksuite/affine/block-note/src/config.ts

@@ -1,5 +1,8 @@
 import type { NoteBlockModel } from '@blocksuite/affine-model';
-import { type BlockStdScope, ConfigExtension } from '@blocksuite/block-std';
+import {
+  type BlockStdScope,
+  ConfigExtensionFactory,
+} from '@blocksuite/block-std';
 import type { TemplateResult } from 'lit';
 
 type NoteBlockContext = {
@@ -12,6 +15,5 @@ export type NoteConfig = {
   pageBlockTitle: (context: NoteBlockContext) => TemplateResult;
 };
 
-export function NoteConfigExtension(config: NoteConfig) {
-  return ConfigExtension('affine:note', config);
-}
+export const NoteConfigExtension =
+  ConfigExtensionFactory<NoteConfig>('affine:note');

blocksuite/affine/block-note/src/effects.ts

@@ -1,7 +1,6 @@
 import { EdgelessNoteBackground } from './components/edgeless-note-background';
 import { EdgelessNoteMask } from './components/edgeless-note-mask';
 import { EdgelessPageBlockTitle } from './components/edgeless-page-block-title';
-import type { NoteConfig } from './config';
 import { NoteBlockComponent } from './note-block';
 import {
   AFFINE_EDGELESS_NOTE,
@@ -15,11 +14,3 @@ export function effects() {
   customElements.define('edgeless-note-background', EdgelessNoteBackground);
   customElements.define('edgeless-page-block-title', EdgelessPageBlockTitle);
 }
-
-declare global {
-  namespace BlockSuite {
-    interface BlockConfigs {
-      'affine:note': NoteConfig;
-    }
-  }
-}

blocksuite/affine/block-surface/src/effects.ts

@@ -1,16 +1,7 @@
 import { SurfaceBlockComponent } from './surface-block.js';
 import { SurfaceBlockVoidComponent } from './surface-block-void.js';
-import type { SurfaceBlockService } from './surface-service.js';
 
 export function effects() {
   customElements.define('affine-surface-void', SurfaceBlockVoidComponent);
   customElements.define('affine-surface', SurfaceBlockComponent);
 }
-
-declare global {
-  namespace BlockSuite {
-    interface BlockServices {
-      'affine:surface': SurfaceBlockService;
-    }
-  }
-}

blocksuite/affine/components/src/toolbar/config.ts

@@ -0,0 +1,7 @@
+import { ConfigExtensionFactory } from '@blocksuite/block-std';
+
+import type { ToolbarMoreMenuConfig } from './types';
+
+export const ToolbarMoreMenuConfigExtension = ConfigExtensionFactory<
+  Partial<ToolbarMoreMenuConfig>
+>('affine-toolbar-more-menu');

blocksuite/affine/components/src/toolbar/index.ts

@@ -8,6 +8,7 @@ import { EditorToolbarSeparator } from './separator.js';
 import { EditorToolbar } from './toolbar.js';
 import { Tooltip } from './tooltip.js';
 
+export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
 export {
   EditorMenuAction,

blocksuite/affine/components/src/toolbar/utils.ts

@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { repeat } from 'lit/directives/repeat.js';
 
+import { ToolbarMoreMenuConfigExtension } from './config.js';
 import type { MenuContext } from './menu-context.js';
 import type {
   FatMenuItems,
@@ -112,10 +113,6 @@ export function renderToolbarSeparator() {
 export function getMoreMenuConfig(std: BlockStdScope): ToolbarMoreMenuConfig {
   return {
     configure: <T extends MenuContext>(groups: MenuItemGroup<T>[]) => groups,
-    ...(
-      std.getConfig('affine:page' as BlockSuite.ConfigKeys) as null | {
-        toolbarMoreMenu: Partial<ToolbarMoreMenuConfig>;
-      }
-    )?.toolbarMoreMenu,
+    ...std.getOptional(ToolbarMoreMenuConfigExtension.identifier),
   };
 }