feat(playground): add basic/edgeless entry (#5875)

packages/blocks/src/page-block/doc/doc-page-block.ts

@@ -124,12 +124,15 @@ export class DocPageBlockComponent extends BlockElement<
     viewportUpdated: new Slot<PageViewport>(),
   };
 
+  private _viewportElement: HTMLDivElement | null = null;
+
   get viewportElement(): HTMLDivElement {
-    const viewportElement = this.host.closest(
+    if (this._viewportElement) return this._viewportElement;
+    this._viewportElement = this.host.closest(
       '.affine-doc-viewport'
     ) as HTMLDivElement | null;
-    assertExists(viewportElement);
-    return viewportElement;
+    assertExists(this._viewportElement);
+    return this._viewportElement;
   }
 
   get viewport(): PageViewport {

packages/blocks/src/page-block/edgeless/components/toolbar/edgeless-toolbar.ts

@@ -420,7 +420,7 @@ export class EdgelessToolbar extends WithDisposable(LitElement) {
       this._timer && clearTimeout(this._timer);
       document.exitFullscreen().catch(console.error);
     } else {
-      launchIntoFullscreen(this.edgeless.editorContainer);
+      launchIntoFullscreen(this.edgeless.viewportElement);
       this._timer = setTimeout(() => {
         this._currentFrameIndex = this._cachedIndex;
       }, 400);

packages/blocks/src/page-block/edgeless/edgeless-page-block.ts

@@ -91,8 +91,6 @@ import {
 import { xywhArrayToObject } from './utils/convert.js';
 import { getCursorMode, isCanvasElement, isFrameBlock } from './utils/query.js';
 
-type EdtitorContainer = HTMLElement & { mode: 'page' | 'edgeless' };
-
 @customElement('affine-edgeless-page')
 export class EdgelessPageBlockComponent extends BlockElement<
   PageBlockModel,
@@ -221,14 +219,17 @@ export class EdgelessPageBlockComponent extends BlockElement<
     return this.service?.uiEventDispatcher;
   }
 
-  private _editorContainer: EdtitorContainer | null = null;
+  private _viewportElement: HTMLElement | null = null;
 
-  get editorContainer(): EdtitorContainer {
-    if (this._editorContainer) return this._editorContainer;
-    this._editorContainer = this.closest('affine-editor-container');
-    assertExists(this._editorContainer);
-    return this._editorContainer;
+  get viewportElement(): HTMLElement {
+    if (this._viewportElement) return this._viewportElement;
+    this._viewportElement = this.host.closest(
+      'edgeless-editor'
+    ) as HTMLElement | null;
+    assertExists(this._viewportElement);
+    return this._viewportElement;
   }
+
   private _resizeObserver: ResizeObserver | null = null;
 
   get surfaceBlockModel() {
@@ -587,7 +588,7 @@ export class EdgelessPageBlockComponent extends BlockElement<
       this.selectionManager.set(this.selectionManager.selections);
     });
 
-    resizeObserver.observe(this.editorContainer);
+    resizeObserver.observe(this.viewportElement);
     this._resizeObserver = resizeObserver;
   }
 

packages/blocks/src/surface-block/surface-block.ts

@@ -12,7 +12,7 @@ import {
   type CssVariableName,
   isCssVariable,
 } from '../_common/theme/css-variables.js';
-import { getThemePropertyValue } from '../_common/theme/utils.js';
+import { ThemeObserver } from '../_common/theme/theme-observer.js';
 import {
   type EdgelessElement,
   isInsideEdgelessEditor,
@@ -166,6 +166,8 @@ export class SurfaceBlockComponent extends BlockElement<
   private _lastTime = 0;
   private _cachedViewport = new Bound();
 
+  private readonly _themeObserver = new ThemeObserver();
+
   @query('edgeless-block-portal-container')
   portal!: EdgelessBlockPortalContainer;
 
@@ -259,12 +261,13 @@ export class SurfaceBlockComponent extends BlockElement<
     this._initEvents();
     this.layer.init([...this._elements.values(), ...this.blocks]);
     this.init();
+    this._initThemeObserver();
   }
 
   getCSSPropertyValue = (value: string) => {
-    const root = this.host;
     if (isCssVariable(value)) {
-      const cssValue = getThemePropertyValue(root, value as CssVariableName);
+      const cssValue =
+        this._themeObserver.cssVariables?.[value as CssVariableName];
       if (cssValue === undefined) {
         console.error(
           new Error(
@@ -334,6 +337,12 @@ export class SurfaceBlockComponent extends BlockElement<
     );
   }
 
+  private _initThemeObserver = () => {
+    this._themeObserver.observe(document.documentElement);
+    this._themeObserver.on(() => this.requestUpdate());
+    this.disposables.add(() => this._themeObserver.dispose());
+  };
+
   private _getSortedSameGroupElements(element: EdgelessElement) {
     let elements: EdgelessElement[];
     const group = this.getGroupParent(element);

packages/playground/examples/basic/index.html → packages/playground/examples/basic/doc/index.html

@@ -5,6 +5,17 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Basic DocEditor Example</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+        background-color: var(--affine-white-90);
+        transition: background-color 0.3s;
+      }
+    </style>
   </head>
   <body>
     <script type="module" src="./main.ts"></script>

packages/playground/examples/basic/edgeless/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Basic EdgelessEditor Example</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+        background-color: var(--affine-white-90);
+        transition: background-color 0.3s;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

packages/playground/examples/basic/edgeless/main.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import '@blocksuite/presets/themes/affine.css';
+
+import { createEmptyPage, EdgelessEditor } from '@blocksuite/presets';
+
+const page = createEmptyPage().init();
+const editor = new EdgelessEditor();
+editor.page = page;
+document.body.appendChild(editor);

packages/playground/vite.config.size.ts

@@ -56,7 +56,7 @@ const config = mergeConfig(
 );
 
 config.build!.rollupOptions!.input = {
-  main: resolve(__dirname, 'examples/basic/index.html'),
+  main: resolve(__dirname, 'examples/basic/doc/index.html'),
 };
 
 export default config;

packages/playground/vite.config.ts

@@ -45,7 +45,14 @@ export default ({ mode }) => {
         input: {
           main: resolve(__dirname, 'index.html'),
           'starter/': resolve(__dirname, 'starter/index.html'),
-          'examples/basic': resolve(__dirname, 'examples/basic/index.html'),
+          'examples/basic/doc': resolve(
+            __dirname,
+            'examples/basic/doc/index.html'
+          ),
+          'examples/basic/edgeless': resolve(
+            __dirname,
+            'examples/basic/edgeless/index.html'
+          ),
           'examples/inline': resolve(__dirname, 'examples/inline/index.html'),
           'examples/store': resolve(__dirname, 'examples/store/index.html'),
         },