feat: add scroll wheel zoom setting (#9476)

### Changed
Add `scroll wheel to zoom` setting option, when the option enables, user can zoom in and out with scroll wheel without pressing the cmd/ctrl key.

blocksuite/playground/apps/_common/mock-services.ts

@@ -3,11 +3,13 @@ import type {
   PeekViewService,
 } from '@blocksuite/affine-components/peek';
 import { PeekViewExtension } from '@blocksuite/affine-components/peek';
+import type { EditorSetting } from '@blocksuite/affine-shared/services';
 import { BlockComponent } from '@blocksuite/block-std';
 import {
   ColorScheme,
   type DocMode,
   type DocModeProvider,
+  GeneralSettingSchema,
   type GenerateDocUrlService,
   matchFlavours,
   type NotificationService,
@@ -19,7 +21,7 @@ import {
 import { Slot } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import { type DocCollection } from '@blocksuite/store';
-import { signal } from '@preact/signals-core';
+import { Signal, signal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
 
 import type { AttachmentViewerPanel } from './components/attachment-viewer-panel.js';
@@ -204,3 +206,28 @@ export function mockGenerateDocUrlService(collection: DocCollection) {
   };
   return generateDocUrlService;
 }
+
+export function mockEditorSetting() {
+  if (window.editorSetting$) return window.editorSetting$;
+
+  const initialVal = Object.entries(GeneralSettingSchema.shape).reduce(
+    (pre: EditorSetting, [key, schema]) => {
+      // @ts-expect-error key is EditorSetting field
+      pre[key as keyof EditorSetting] = schema.parse(undefined);
+      return pre;
+    },
+    {} as EditorSetting
+  );
+
+  const signal = new Signal<EditorSetting>(initialVal);
+
+  window.editorSetting$ = signal;
+
+  return signal;
+}
+
+declare global {
+  interface Window {
+    editorSetting$: Signal<EditorSetting>;
+  }
+}

blocksuite/playground/apps/default/utils/editor.ts

@@ -3,6 +3,7 @@ import {
   CommunityCanvasTextFonts,
   DocModeExtension,
   DocModeProvider,
+  EditorSettingExtension,
   FontConfigExtension,
   GenerateDocUrlExtension,
   GenerateDocUrlProvider,
@@ -26,6 +27,7 @@ import {
 } from '../../_common/history.js';
 import {
   mockDocModeService,
+  mockEditorSetting,
   mockGenerateDocUrlService,
   mockNotificationService,
   mockParseDocUrlService,
@@ -126,6 +128,7 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
       NotificationExtension(mockNotificationService(editor)),
       FontConfigExtension(CommunityCanvasTextFonts),
       mockPeekViewExtension(attachmentViewerPanel),
+      EditorSettingExtension(mockEditorSetting()),
     ];
     return newSpec;
   }

blocksuite/playground/apps/starter/main.ts

@@ -22,7 +22,10 @@ import { effects as presetsEffects } from '@blocksuite/presets/effects';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as store from '@blocksuite/store';
 
-import { mockDocModeService } from '../_common/mock-services.js';
+import {
+  mockDocModeService,
+  mockEditorSetting,
+} from '../_common/mock-services.js';
 import { setupEdgelessTemplate } from '../_common/setup.js';
 import {
   createStarterDocCollection,
@@ -59,6 +62,7 @@ async function main() {
         },
         defaultExtensions: (): ExtensionType[] => [
           FontConfigExtension(CommunityCanvasTextFonts),
+          blocks.EditorSettingExtension(mockEditorSetting()),
         ],
         extensions: {
           FontConfigExtension: FontConfigExtension(CommunityCanvasTextFonts),

blocksuite/playground/apps/starter/utils/editor.ts

@@ -7,6 +7,7 @@ import {
   AffineFormatBarWidget,
   CommunityCanvasTextFonts,
   DocModeProvider,
+  EditorSettingExtension,
   FontConfigExtension,
   GenerateDocUrlExtension,
   NotificationExtension,
@@ -35,6 +36,7 @@ import {
 } from '../../_common/history.js';
 import {
   mockDocModeService,
+  mockEditorSetting,
   mockGenerateDocUrlService,
   mockNotificationService,
   mockParseDocUrlService,
@@ -79,6 +81,7 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
     GenerateDocUrlExtension(mockGenerateDocUrlService(collection)),
     NotificationExtension(mockNotificationService(editor)),
     OverrideThemeExtension(themeExtension),
+    EditorSettingExtension(mockEditorSetting()),
     {
       setup: di => {
         di.override(DocModeProvider, () =>