fix: color of canvas element under embed dark theme whiteboard is wro…

…ng (#8677) Fix issue [BS-1762](https://linear.app/affine-design/issue/BS-1762). After: ![截屏2024-11-05 18.35.48.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/8412d160-d446-40a8-a4f3-25d9f9cbab2e.png)
toeverything · Nov 6, 2024 · 5dc58a6 · 5dc58a6
1 parent 65baeb5
commit 5dc58a6
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/packages/affine/shared/src/services/theme-service.ts b/packages/affine/shared/src/services/theme-service.ts
@@ -14,7 +14,7 @@ import {
 } from '@toeverything/theme';
 import { unsafeCSS } from 'lit';
 
-import { DocModeProvider, type DocModeService } from './doc-mode-service.js';
+import { isInsideEdgelessEditor } from '../utils/index.js';
 
 const TRANSPARENT = 'transparent';
 
@@ -53,28 +53,26 @@ export class ThemeService extends Extension {
   }
 
   get theme() {
-    return this.docMode.getEditorMode() === 'page'
-      ? this.appTheme
-      : this.edgelessTheme;
+    return isInsideEdgelessEditor(this.std.host)
+      ? this.edgelessTheme
+      : this.appTheme;
   }
 
   get theme$() {
-    return this.docMode.getEditorMode() === 'page' ? this.app$ : this.edgeless$;
+    return isInsideEdgelessEditor(this.std.host) ? this.edgeless$ : this.app$;
   }
 
-  constructor(
-    private std: BlockStdScope,
-    private docMode: DocModeService
-  ) {
+  constructor(private std: BlockStdScope) {
     super();
     const extension = this.std.getOptional(ThemeExtensionIdentifier);
     this.app$ = extension?.getAppTheme?.() || getThemeObserver().theme$;
     this.edgeless$ =
-      extension?.getEdgelessTheme?.() || getThemeObserver().theme$;
+      extension?.getEdgelessTheme?.(this.std.doc.id) ||
+      getThemeObserver().theme$;
   }
 
   static override setup(di: Container) {
-    di.addImpl(ThemeProvider, ThemeService, [StdIdentifier, DocModeProvider]);
+    di.addImpl(ThemeProvider, ThemeService, [StdIdentifier]);
   }
 
   /**

diff --git a/packages/affine/shared/src/utils/dom/checker.ts b/packages/affine/shared/src/utils/dom/checker.ts
@@ -8,6 +8,8 @@ export function isInsidePageEditor(host: EditorHost) {
 
 export function isInsideEdgelessEditor(host: EditorHost) {
   return Array.from(host.children).some(
-    v => v.tagName.toLowerCase() === 'affine-edgeless-root'
+    v =>
+      v.tagName.toLowerCase() === 'affine-edgeless-root' ||
+      v.tagName.toLowerCase() === 'affine-edgeless-root-preview'
   );
 }
diff --git a/packages/affine/shared/src/utils/spec/spec-provider.ts b/packages/affine/shared/src/utils/spec/spec-provider.ts
@@ -46,4 +46,17 @@ export class SpecProvider {
   hasSpec(id: string) {
     return this.specMap.has(id);
   }
+
+  omitSpec(id: string, targetSpec: ExtensionType) {
+    const existingSpec = this.specMap.get(id);
+    if (!existingSpec) {
+      console.error(`Spec not found for ${id}`);
+      return;
+    }
+
+    this.specMap.set(
+      id,
+      existingSpec.filter(spec => spec !== targetSpec)
+    );
+  }
 }
diff --git a/packages/playground/apps/default/utils/editor.ts b/packages/playground/apps/default/utils/editor.ts
@@ -11,6 +11,7 @@ import {
   ParseDocUrlExtension,
   RefNodeSlotsExtension,
   RefNodeSlotsProvider,
+  SpecProvider,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import { AffineEditorContainer } from '@blocksuite/presets';
@@ -63,6 +64,9 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
     refNodeSlotsExtension,
     ...specs.edgelessModeSpecs,
   ]);
+  SpecProvider.getInstance().extendSpec('edgeless:preview', [
+    OverrideThemeExtension(themeExtension),
+  ]);
   editor.doc = doc;
   editor.mode = 'page';
   editor.std
@@ -130,7 +134,6 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
       FontConfigExtension(CommunityCanvasTextFonts),
       mockPeekViewExtension(attachmentViewerPanel),
     ];
-
     return newSpec;
   }
 }
diff --git a/packages/playground/apps/starter/utils/editor.ts b/packages/playground/apps/starter/utils/editor.ts
@@ -114,6 +114,10 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
   edgelessSpecs.extend([...extensions]);
   editor.edgelessSpecs = edgelessSpecs.value;
 
+  SpecProvider.getInstance().extendSpec('edgeless:preview', [
+    OverrideThemeExtension(themeExtension),
+  ]);
+
   editor.mode = 'page';
   editor.doc = doc;
   editor.std