fix: color of canvas element under embed whiteboard is wrong (#8712)

Fix issue [BS-1762](https://linear.app/affine-design/issue/BS-1762). Related [PR](https://github.com/toeverything/blocksuite/pull/8677) in Blocksuite.

`light` whiteboard with embedded `dark` whiteboard:
![截屏2024-11-05 22.39.18.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/42319032-0940-4a67-b12b-64aeec9c49a6.png)

`dark` whiteboard with embedded `light` whiteboard:
![截屏2024-11-05 22.43.36.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/63c5c747-73dc-4d4b-89c7-281d4bf20fcc.png)

`light` doc with `dark` frame:
![截屏2024-11-05 22.40.01.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/b1eae95f-41aa-4093-8fa1-5641578e8f4e.png)

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -24,7 +24,6 @@ import {
   type DocCustomPropertyInfo,
   DocService,
   DocsService,
-  FeatureFlagService,
   useFramework,
   useLiveData,
   useService,
@@ -50,6 +49,7 @@ import {
 } from '../../doc-properties';
 import { BiDirectionalLinkPanel } from './bi-directional-link-panel';
 import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title';
+import { extendEdgelessPreviewSpec } from './specs/custom/root-block';
 import {
   patchDocModeService,
   patchEdgelessClipboard,
@@ -96,14 +96,12 @@ const usePatchSpecs = (shared: boolean, mode: DocMode) => {
     docsService,
     editorService,
     workspaceService,
-    featureFlagService,
   } = useServices({
     PeekViewService,
     DocService,
     DocsService,
     WorkspaceService,
     EditorService,
-    FeatureFlagService,
   });
   const framework = useFramework();
   const referenceRenderer: ReferenceReactRenderer = useMemo(() => {
@@ -130,12 +128,15 @@ const usePatchSpecs = (shared: boolean, mode: DocMode) => {
     };
   }, [workspaceService]);
 
+  useMemo(() => {
+    extendEdgelessPreviewSpec(framework);
+  }, [framework]);
+
   const specs = useMemo(() => {
-    const enableAI = featureFlagService.flags.enable_ai.value;
     return mode === 'edgeless'
-      ? createEdgelessModeSpecs(framework, !!enableAI)
-      : createPageModeSpecs(framework, !!enableAI);
-  }, [featureFlagService.flags.enable_ai.value, mode, framework]);
+      ? createEdgelessModeSpecs(framework)
+      : createPageModeSpecs(framework);
+  }, [mode, framework]);
 
   const confirmModal = useConfirmModal();
   const patchedSpecs = useMemo(() => {

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts

@@ -30,11 +30,13 @@ import {
 import {
   createSignalFromObservable,
   type Signal,
+  SpecProvider,
 } from '@blocksuite/affine-shared/utils';
 import type { Container } from '@blocksuite/global/di';
 import {
   DocService,
   DocsService,
+  FeatureFlagService,
   type FrameworkProvider,
 } from '@toeverything/infra';
 import type { Observable } from 'rxjs';
@@ -60,7 +62,7 @@ function getTelemetryExtension(): ExtensionType {
   };
 }
 
-function createThemeExtension(framework: FrameworkProvider) {
+function getThemeExtension(framework: FrameworkProvider) {
   class AffineThemeExtension
     extends LifeCycleWatcher
     implements ThemeExtension
@@ -153,14 +155,32 @@ function getEditorConfigExtension(
   ];
 }
 
+export const extendEdgelessPreviewSpec = (function () {
+  let _extension: ExtensionType;
+  let _framework: FrameworkProvider;
+  return function (framework: FrameworkProvider) {
+    if (framework === _framework && _extension) {
+      return _extension;
+    } else {
+      _extension &&
+        SpecProvider.getInstance().omitSpec('edgeless:preview', _extension);
+      _extension = getThemeExtension(framework);
+      _framework = framework;
+      SpecProvider.getInstance().extendSpec('edgeless:preview', [_extension]);
+      return _extension;
+    }
+  };
+})();
+
 export function createPageRootBlockSpec(
-  framework: FrameworkProvider,
-  enableAI: boolean
+  framework: FrameworkProvider
 ): ExtensionType[] {
+  const featureFlagService = framework.get(FeatureFlagService);
+  const enableAI = featureFlagService.flags.enable_ai.value;
   return [
     enableAI ? AIPageRootBlockSpec : PageRootBlockSpec,
     FontLoaderService,
-    createThemeExtension(framework),
+    getThemeExtension(framework),
     getFontConfigExtension(),
     getTelemetryExtension(),
     getEditorConfigExtension(framework),
@@ -168,13 +188,14 @@ export function createPageRootBlockSpec(
 }
 
 export function createEdgelessRootBlockSpec(
-  framework: FrameworkProvider,
-  enableAI: boolean
+  framework: FrameworkProvider
 ): ExtensionType[] {
+  const featureFlagService = framework.get(FeatureFlagService);
+  const enableAI = featureFlagService.flags.enable_ai.value;
   return [
     enableAI ? AIEdgelessRootBlockSpec : EdgelessRootBlockSpec,
     FontLoaderService,
-    createThemeExtension(framework),
+    getThemeExtension(framework),
     EdgelessToolExtension,
     EdgelessBuiltInManager,
     getFontConfigExtension(),

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/edgeless.ts

@@ -10,15 +10,19 @@ import {
   EdgelessTextBlockSpec,
   FrameBlockSpec,
 } from '@blocksuite/affine/blocks';
-import type { FrameworkProvider } from '@toeverything/infra';
+import {
+  FeatureFlagService,
+  type FrameworkProvider,
+} from '@toeverything/infra';
 
 import { AIBlockSpecs, DefaultBlockSpecs } from './common';
 import { createEdgelessRootBlockSpec } from './custom/root-block';
 
 export function createEdgelessModeSpecs(
-  framework: FrameworkProvider,
-  enableAI: boolean
+  framework: FrameworkProvider
 ): ExtensionType[] {
+  const featureFlagService = framework.get(FeatureFlagService);
+  const enableAI = featureFlagService.flags.enable_ai.value;
   return [
     ...(enableAI ? AIBlockSpecs : DefaultBlockSpecs),
     EdgelessSurfaceBlockSpec,
@@ -27,7 +31,7 @@ export function createEdgelessModeSpecs(
     EdgelessTextBlockSpec,
     EdgelessNoteBlockSpec,
     // special
-    createEdgelessRootBlockSpec(framework, enableAI),
+    createEdgelessRootBlockSpec(framework),
   ].flat();
 }
 

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/page.ts

@@ -4,21 +4,25 @@ import {
   PageSurfaceBlockSpec,
   PageSurfaceRefBlockSpec,
 } from '@blocksuite/affine/blocks';
-import { type FrameworkProvider } from '@toeverything/infra';
+import {
+  FeatureFlagService,
+  type FrameworkProvider,
+} from '@toeverything/infra';
 
 import { AIBlockSpecs, DefaultBlockSpecs } from './common';
 import { createPageRootBlockSpec } from './custom/root-block';
 
 export function createPageModeSpecs(
-  framework: FrameworkProvider,
-  enableAI: boolean
+  framework: FrameworkProvider
 ): ExtensionType[] {
+  const featureFlagService = framework.get(FeatureFlagService);
+  const enableAI = featureFlagService.flags.enable_ai.value;
   return [
     ...(enableAI ? AIBlockSpecs : DefaultBlockSpecs),
     PageSurfaceBlockSpec,
     PageSurfaceRefBlockSpec,
     NoteBlockSpec,
     // special
-    createPageRootBlockSpec(framework, enableAI),
+    createPageRootBlockSpec(framework),
   ].flat();
 }