refactor(editor): improve config extension (#11006)

blocksuite/affine/rich-text/src/inline/presets/affine-inline-specs.ts

@@ -11,7 +11,7 @@ import { FootNoteNodeConfigIdentifier } from './nodes/footnote-node/footnote-con
 import { builtinInlineLinkToolbarConfig } from './nodes/link-node/configs/toolbar.js';
 import { builtinInlineReferenceToolbarConfig } from './nodes/reference-node/configs/toolbar.js';
 import {
-  ReferenceNodeConfigIdentifier,
+  ReferenceNodeConfigExtension,
   ReferenceNodeConfigProvider,
 } from './nodes/reference-node/reference-config.js';
 
@@ -123,7 +123,8 @@ export const ReferenceInlineSpecExtension = InlineSpecExtension(
   provider => {
     const std = provider.get(StdIdentifier);
     const configProvider = new ReferenceNodeConfigProvider(std);
-    const config = provider.getOptional(ReferenceNodeConfigIdentifier) ?? {};
+    const config =
+      provider.getOptional(ReferenceNodeConfigExtension.identifier) ?? {};
     if (config.customContent) {
       configProvider.setCustomContent(config.customContent);
     }

blocksuite/affine/rich-text/src/inline/presets/nodes/reference-node/reference-config.ts

@@ -1,6 +1,7 @@
-import type { BlockStdScope } from '@blocksuite/block-std';
-import { createIdentifier } from '@blocksuite/global/di';
-import type { ExtensionType } from '@blocksuite/store';
+import {
+  type BlockStdScope,
+  ConfigExtensionFactory,
+} from '@blocksuite/block-std';
 import type { TemplateResult } from 'lit';
 
 import type { AffineReference } from './reference-node';
@@ -11,18 +12,8 @@ export interface ReferenceNodeConfig {
   hidePopup?: boolean;
 }
 
-export const ReferenceNodeConfigIdentifier =
-  createIdentifier<ReferenceNodeConfig>('AffineReferenceNodeConfig');
-
-export function ReferenceNodeConfigExtension(
-  config: ReferenceNodeConfig
-): ExtensionType {
-  return {
-    setup: di => {
-      di.addImpl(ReferenceNodeConfigIdentifier, () => ({ ...config }));
-    },
-  };
-}
+export const ReferenceNodeConfigExtension =
+  ConfigExtensionFactory<ReferenceNodeConfig>('AffineReferenceNodeConfig');
 
 export class ReferenceNodeConfigProvider {
   private _customContent:

blocksuite/docs/api/@blocksuite/block-std/index/functions/ConfigExtensionFactory.md

@@ -6,13 +6,13 @@
 
 # Function: ConfigExtensionFactory()
 
-> **ConfigExtensionFactory**\<`Config`\>(`flavor`): (`config`) => `ExtensionType` & `object`
+> **ConfigExtensionFactory**\<`Config`\>(`configId`): `ConfigFactory`\<`Config`\>
 
 Create a config extension.
 A config extension provides a configuration object for a block flavour.
 The configuration object can be used like:
 ```ts
-const config = std.provider.get(ConfigIdentifier('my-flavour'));
+const config = std.provider.getOptional(ConfigIdentifier('my-flavour'));
 ```
 
 ## Type Parameters
@@ -23,15 +23,15 @@ const config = std.provider.get(ConfigIdentifier('my-flavour'));
 
 ## Parameters
 
-### flavor
+### configId
 
 `string`
 
-The flavour of the block that the config is for.
+The id of the config. Should be unique for each config.
 
 ## Returns
 
-(`config`) => `ExtensionType` & `object`
+`ConfigFactory`\<`Config`\>
 
 ## Example
 

blocksuite/framework/block-std/src/extension/config.ts

@@ -3,16 +3,20 @@ import type { ExtensionType } from '@blocksuite/store';
 
 import { ConfigIdentifier } from '../identifier.js';
 
+export interface ConfigFactory<Config extends Record<string, any>> {
+  (config: Config): ExtensionType;
+  identifier: ServiceIdentifier<Config>;
+}
+
 /**
  * Create a config extension.
  * A config extension provides a configuration object for a block flavour.
  * The configuration object can be used like:
  * ```ts
- * const config = std.provider.get(ConfigIdentifier('my-flavour'));
+ * const config = std.provider.getOptional(ConfigIdentifier('my-flavour'));
  * ```
  *
- * @param flavor The flavour of the block that the config is for.
- * @param config The configuration object.
+ * @param configId The id of the config. Should be unique for each config.
  *
  * @example
  * ```ts
@@ -25,14 +29,14 @@ import { ConfigIdentifier } from '../identifier.js';
  * ```
  */
 export function ConfigExtensionFactory<Config extends Record<string, any>>(
-  flavor: string
-): ((config: Config) => ExtensionType) & {
-  identifier: ServiceIdentifier<Config>;
-} {
-  const identifier = ConfigIdentifier(flavor) as ServiceIdentifier<Config>;
+  configId: string
+): ConfigFactory<Config> {
+  const identifier = ConfigIdentifier(configId) as ServiceIdentifier<Config>;
   const extensionFactory = (config: Config): ExtensionType => ({
     setup: di => {
-      di.override(ConfigIdentifier(flavor), () => config);
+      di.override(ConfigIdentifier(configId), () => {
+        return config;
+      });
     },
   });
   extensionFactory.identifier = identifier;

packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts

@@ -1,12 +1,13 @@
 import { VirtualKeyboardProvider } from '@affine/core/mobile/modules/virtual-keyboard';
 import {
   type BlockStdScope,
-  ConfigIdentifier,
   LifeCycleWatcher,
   LifeCycleWatcherIdentifier,
 } from '@blocksuite/affine/block-std';
-import type { CodeBlockConfig } from '@blocksuite/affine/blocks/code';
-import { codeToolbarWidget } from '@blocksuite/affine/blocks/code';
+import {
+  CodeBlockConfigExtension,
+  codeToolbarWidget,
+} from '@blocksuite/affine/blocks/code';
 import { imageToolbarWidget } from '@blocksuite/affine/blocks/image';
 import { ParagraphBlockConfigExtension } from '@blocksuite/affine/blocks/paragraph';
 import { surfaceRefToolbarWidget } from '@blocksuite/affine/blocks/surface-ref';
@@ -15,10 +16,6 @@ import type {
   ServiceIdentifier,
 } from '@blocksuite/affine/global/di';
 import { DisposableGroup } from '@blocksuite/affine/global/disposable';
-import {
-  type ReferenceNodeConfig,
-  ReferenceNodeConfigIdentifier,
-} from '@blocksuite/affine/rich-text';
 import {
   DocModeProvider,
   FeatureFlagService,
@@ -41,33 +38,6 @@ class MobileSpecsPatches extends LifeCycleWatcher {
     featureFlagService.setFlag('enable_mobile_keyboard_toolbar', true);
     featureFlagService.setFlag('enable_mobile_linked_doc_menu', true);
   }
-
-  static override setup(di: Container) {
-    super.setup(di);
-
-    // Hide reference popup on mobile.
-    {
-      const prev = di.getFactory(ReferenceNodeConfigIdentifier);
-      di.override(ReferenceNodeConfigIdentifier, provider => {
-        return {
-          ...prev?.(provider),
-          hidePopup: true,
-        } satisfies ReferenceNodeConfig;
-      });
-    }
-
-    // Hide number lines for code block on mobile.
-    {
-      const codeConfigIdentifier = ConfigIdentifier('affine:code');
-      const prev = di.getFactory(codeConfigIdentifier);
-      di.override(codeConfigIdentifier, provider => {
-        return {
-          ...prev?.(provider),
-          showLineNumbers: false,
-        } satisfies CodeBlockConfig;
-      });
-    }
-  }
 }
 
 const mobileParagraphConfig = ParagraphBlockConfigExtension({
@@ -86,6 +56,10 @@ const mobileParagraphConfig = ParagraphBlockConfigExtension({
   },
 });
 
+const mobileCodeConfig = CodeBlockConfigExtension({
+  showLineNumbers: false,
+});
+
 function KeyboardToolbarExtension(framework: FrameworkProvider): ExtensionType {
   const affineVirtualKeyboardProvider = framework.get(VirtualKeyboardProvider);
 
@@ -169,5 +143,6 @@ export function enableMobileExtension(
     MobileSpecsPatches,
     KeyboardToolbarExtension(framework),
     mobileParagraphConfig,
+    mobileCodeConfig,
   ]);
 }

packages/frontend/core/src/blocksuite/extensions/reference-renderer.ts

@@ -19,5 +19,6 @@ export function patchReferenceRenderer(
 
   return ReferenceNodeConfigExtension({
     customContent,
+    hidePopup: BUILD_CONFIG.isMobileEdition,
   });
 }