refactor(editor): extract edgeless legacy slots (#9363)

blocksuite/affine/block-attachment/package.json

@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-block-embed": "workspace:*",
+    "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",

blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts

@@ -1,11 +1,11 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import type { HoverController } from '@blocksuite/affine-components/hover';
 import { AttachmentBlockStyles } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
-import { type BlockService, toGfxBlockComponent } from '@blocksuite/block-std';
+import { toGfxBlockComponent } from '@blocksuite/block-std';
-import type { Slot } from '@blocksuite/store';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { AttachmentBlockComponent } from './attachment-block.js';
@@ -17,30 +17,22 @@ export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent(
 
   override blockDraggable = false;
 
-  get rootService(): null | (BlockService & { slots: Record<string, Slot> }) {
+  get slots() {
-    return this.std.getService('affine:page');
+    return this.std.get(EdgelessLegacySlotIdentifier);
   }
 
   override connectedCallback(): void {
     super.connectedCallback();
 
-    const rootService = this.rootService;
-    if (!rootService) {
-      console.warn('rootService is not found');
-      return;
-    }
-
-    // TODO: move root service slots to extension
     this._disposables.add(
-      rootService.slots.elementResizeStart.on(() => {
+      this.slots.elementResizeStart.on(() => {
         this._isResizing = true;
         this._showOverlay = true;
       })
     );
 
-    // TODO: move root service slots to extension
     this._disposables.add(
-      rootService.slots.elementResizeEnd.on(() => {
+      this.slots.elementResizeEnd.on(() => {
         this._isResizing = false;
         this._showOverlay =
           this._isResizing || this._isDragging || !this._isSelected;

blocksuite/affine/block-attachment/tsconfig.json

@@ -30,6 +30,9 @@
     },
     {
       "path": "../block-embed"
+    },
+    {
+      "path": "../block-surface"
     }
   ]
 }

blocksuite/affine/block-embed/src/common/insert-embed-card.ts

@@ -76,9 +76,9 @@ export function insertEmbedCard(
       editing: false,
     });
 
-    // @ts-expect-error TODO: fix after edgeless refactor
+    gfx.tool.setTool(
-    edgelessRoot.tools.setEdgelessTool({
+      // @ts-expect-error FIXME: resolve after gfx tool refactor
-      type: 'default',
+      'default'
-    });
+    );
   }
 }

blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts

@@ -1,3 +1,4 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import {
   blockComponentSymbol,
   type BlockService,
@@ -49,21 +50,22 @@ export function toEdgelessEmbedBlock<
       return;
     }
 
+    get edgelessSlots() {
+      return this.std.get(EdgelessLegacySlotIdentifier);
+    }
+
     override connectedCallback(): void {
       super.connectedCallback();
-      const rootService = this.rootService;
 
       this._disposables.add(
-        // @ts-expect-error TODO: fix after edgeless slots are migrated to extension
+        this.edgelessSlots.elementResizeStart.on(() => {
-        rootService.slots.elementResizeStart.on(() => {
           this._isResizing = true;
           this._showOverlay = true;
         })
       );
 
       this._disposables.add(
-        // @ts-expect-error TODO: fix after edgeless slots are migrated to extension
+        this.edgelessSlots.elementResizeEnd.on(() => {
-        rootService.slots.elementResizeEnd.on(() => {
           this._isResizing = false;
           this._showOverlay =
             this._isResizing || this._isDragging || !this._isSelected;

blocksuite/affine/block-embed/src/effects.ts

@@ -1,3 +1,5 @@
+import type * as SurfaceEffects from '@blocksuite/affine-block-surface/effects';
+
 import { EmbedFigmaBlockComponent } from './embed-figma-block';
 import { EmbedEdgelessBlockComponent } from './embed-figma-block/embed-edgeless-figma-block';
 import type { EmbedFigmaBlockService } from './embed-figma-block/embed-figma-service';
@@ -90,6 +92,8 @@ export function effects() {
   );
 }
 
+declare type _GLOBAL = typeof SurfaceEffects;
+
 declare global {
   interface HTMLElementTagNameMap {
     'affine-embed-figma-block': EmbedFigmaBlockComponent;

blocksuite/affine/block-embed/tsconfig.json

@@ -27,6 +27,9 @@
     },
     {
       "path": "../shared"
+    },
+    {
+      "path": "../block-surface"
     }
   ]
 }

blocksuite/affine/block-latex/src/index.ts

@@ -7,7 +7,7 @@ export * from './latex-block';
 export * from './latex-spec';
 
 // Global types
-declare type _Global =
+declare type _GLOBAl =
   | typeof NoteType
   | typeof CommandsType
   | typeof RemarkMathType;

blocksuite/affine/block-note/package.json

@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-block-embed": "workspace:*",
+    "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",

blocksuite/affine/block-note/src/note-edgeless-block.ts

@@ -1,3 +1,4 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons';
 import type { NoteBlockModel } from '@blocksuite/affine-model';
 import {
@@ -13,11 +14,7 @@ import {
   matchFlavours,
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
-import type {
+import type { BlockComponent, EditorHost } from '@blocksuite/block-std';
-  BlockComponent,
-  BlockService,
-  EditorHost,
-} from '@blocksuite/block-std';
 import { ShadowlessElement, toGfxBlockComponent } from '@blocksuite/block-std';
 import {
   almostEqual,
@@ -26,7 +23,7 @@ import {
   Point,
   WithDisposable,
 } from '@blocksuite/global/utils';
-import type { BlockModel, Slot } from '@blocksuite/store';
+import type { BlockModel } from '@blocksuite/store';
 import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -153,9 +150,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
   }
 
   get rootService() {
-    return this.std.getService('affine:page') as BlockService & {
+    return this.std.getService('affine:page');
-      slots: Record<string, Slot>;
-    };
   }
 
   private _collapsedContent() {
@@ -330,12 +325,16 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
     );
   }
 
+  get edgelessSlots() {
+    return this.std.get(EdgelessLegacySlotIdentifier);
+  }
+
   override firstUpdated() {
     const { _disposables } = this;
     const selection = this.gfx.selection;
 
     _disposables.add(
-      this.rootService.slots.elementResizeStart.on(() => {
+      this.edgelessSlots.elementResizeStart.on(() => {
         if (selection.selectedElements.includes(this.model)) {
           this._isResizing = true;
         }
@@ -343,7 +342,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
     );
 
     _disposables.add(
-      this.rootService.slots.elementResizeEnd.on(() => {
+      this.edgelessSlots.elementResizeEnd.on(() => {
         this._isResizing = false;
       })
     );

blocksuite/affine/block-note/tsconfig.json

@@ -30,6 +30,9 @@
     },
     {
       "path": "../block-embed"
+    },
+    {
+      "path": "../block-surface"
     }
   ]
 }

blocksuite/affine/block-surface/src/extensions/index.ts

@@ -1 +1,2 @@
 export * from './crud-extension';
+export * from './legacy-slot-extension';

blocksuite/affine/block-surface/src/extensions/legacy-slot-extension.ts

@@ -0,0 +1,40 @@
+import type { FrameBlockModel } from '@blocksuite/affine-model';
+import type { ExtensionType } from '@blocksuite/block-std';
+import { createIdentifier } from '@blocksuite/global/di';
+import { Slot } from '@blocksuite/global/utils';
+
+export const EdgelessLegacySlotIdentifier = createIdentifier<{
+  readonlyUpdated: Slot<boolean>;
+  navigatorSettingUpdated: Slot<{
+    hideToolbar?: boolean;
+    blackBackground?: boolean;
+    fillScreen?: boolean;
+  }>;
+  navigatorFrameChanged: Slot<FrameBlockModel>;
+  fullScreenToggled: Slot;
+
+  elementResizeStart: Slot;
+  elementResizeEnd: Slot;
+  toggleNoteSlicer: Slot;
+
+  toolbarLocked: Slot<boolean>;
+}>('AffineEdgelessLegacySlotService');
+
+export const EdgelessLegacySlotExtension: ExtensionType = {
+  setup: di => {
+    di.addImpl(EdgelessLegacySlotIdentifier, () => ({
+      readonlyUpdated: new Slot<boolean>(),
+      navigatorSettingUpdated: new Slot<{
+        hideToolbar?: boolean;
+        blackBackground?: boolean;
+        fillScreen?: boolean;
+      }>(),
+      navigatorFrameChanged: new Slot<FrameBlockModel>(),
+      fullScreenToggled: new Slot(),
+      elementResizeStart: new Slot(),
+      elementResizeEnd: new Slot(),
+      toggleNoteSlicer: new Slot(),
+      toolbarLocked: new Slot<boolean>(),
+    }));
+  },
+};

blocksuite/affine/block-surface/src/surface-spec.ts

@@ -10,11 +10,14 @@ import { literal } from 'lit/static-html.js';
 import {
   EdgelessSurfaceBlockAdapterExtensions,
   SurfaceBlockAdapterExtensions,
-} from './adapters/extension.js';
+} from './adapters/extension';
-import { commands } from './commands/index.js';
+import { commands } from './commands';
-import { EdgelessCRUDExtension } from './extensions/crud-extension.js';
+import {
-import { SurfaceBlockService } from './surface-service.js';
+  EdgelessCRUDExtension,
-import { MindMapView } from './view/mindmap.js';
+  EdgelessLegacySlotExtension,
+} from './extensions';
+import { SurfaceBlockService } from './surface-service';
+import { MindMapView } from './view/mindmap';
 
 const CommonSurfaceBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:surface'),
@@ -23,6 +26,7 @@ const CommonSurfaceBlockSpec: ExtensionType[] = [
   HighlightSelectionExtension,
   MindMapView,
   EdgelessCRUDExtension,
+  EdgelessLegacySlotExtension,
 ];
 
 export const PageSurfaceBlockSpec: ExtensionType[] = [

blocksuite/affine/block-surface/src/utils/rough/core.ts

@@ -64,8 +64,8 @@ export interface ResolvedOptions extends Options {
   preserveVertices: boolean;
 }
 
-export declare type OpType = 'move' | 'bcurveTo' | 'lineTo';
+export type OpType = 'move' | 'bcurveTo' | 'lineTo';
-export declare type OpSetType = 'path' | 'fillPath' | 'fillSketch';
+export type OpSetType = 'path' | 'fillPath' | 'fillSketch';
 
 export interface Op {
   op: OpType;

blocksuite/blocks/src/root-block/edgeless/edgeless-root-block.ts

@@ -2,7 +2,10 @@ import type {
   SurfaceBlockComponent,
   SurfaceBlockModel,
 } from '@blocksuite/affine-block-surface';
-import { CommonUtils } from '@blocksuite/affine-block-surface';
+import {
+  CommonUtils,
+  EdgelessLegacySlotIdentifier,
+} from '@blocksuite/affine-block-surface';
 import type {
   RootBlockModel,
   ShapeElementModel,
@@ -143,7 +146,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
   }
 
   get slots() {
-    return this.service.slots;
+    return this.std.get(EdgelessLegacySlotIdentifier);
   }
 
   get surfaceBlockModel() {

blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts

@@ -1,5 +1,6 @@
 import {
   EdgelessCRUDIdentifier,
+  EdgelessLegacySlotIdentifier,
   type ElementRenderer,
   elementRenderers,
   type SurfaceBlockModel,
@@ -7,7 +8,6 @@ import {
 } from '@blocksuite/affine-block-surface';
 import {
   type ConnectorElementModel,
-  type FrameBlockModel,
   type GroupElementModel,
   MindmapElementModel,
   RootBlockSchema,
@@ -28,7 +28,6 @@ import {
 } from '@blocksuite/block-std/gfx';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { Bound, getCommonBound } from '@blocksuite/global/utils';
-import { Slot } from '@blocksuite/store';
 import { effect } from '@preact/signals-core';
 
 import { getSurfaceBlock } from '../../surface-ref-block/utils.js';
@@ -59,23 +58,6 @@ export class EdgelessRootService extends RootService implements SurfaceContext {
 
   elementRenderers: Record<string, ElementRenderer> = elementRenderers;
 
-  slots = {
-    readonlyUpdated: new Slot<boolean>(),
-    navigatorSettingUpdated: new Slot<{
-      hideToolbar?: boolean;
-      blackBackground?: boolean;
-      fillScreen?: boolean;
-    }>(),
-    navigatorFrameChanged: new Slot<FrameBlockModel>(),
-    fullScreenToggled: new Slot(),
-
-    elementResizeStart: new Slot(),
-    elementResizeEnd: new Slot(),
-    toggleNoteSlicer: new Slot(),
-
-    toolbarLocked: new Slot<boolean>(),
-  };
-
   TemplateJob = TemplateJob;
 
   get blocks(): GfxBlockModel[] {
@@ -168,12 +150,14 @@ export class EdgelessRootService extends RootService implements SurfaceContext {
   private _initReadonlyListener() {
     const doc = this.doc;
 
+    const slots = this.std.get(EdgelessLegacySlotIdentifier);
+
     let readonly = doc.readonly;
     this.disposables.add(
       doc.awarenessStore.slots.update.on(() => {
         if (readonly !== doc.readonly) {
           readonly = doc.readonly;
-          this.slots.readonlyUpdated.emit(readonly);
+          slots.readonlyUpdated.emit(readonly);
         }
       })
     );

blocksuite/blocks/src/root-block/widgets/drag-handle/watchers/edgeless-watcher.ts

@@ -1,3 +1,7 @@
+import {
+  EdgelessLegacySlotIdentifier,
+  type SurfaceBlockComponent,
+} from '@blocksuite/affine-block-surface';
 import type { DndEventState } from '@blocksuite/block-std';
 import {
   GfxControllerIdentifier,
@@ -6,10 +10,6 @@ import {
 import { type IVec, Rect } from '@blocksuite/global/utils';
 import { effect } from '@preact/signals-core';
 
-import type {
-  EdgelessRootBlockComponent,
-  EdgelessRootService,
-} from '../../../edgeless/index.js';
 import {
   getSelectedRect,
   isTopLevelBlock,
@@ -64,8 +64,12 @@ export class EdgelessWatcher {
 
   private readonly _showDragHandleOnTopLevelBlocks = async () => {
     if (this.widget.mode === 'page') return;
-    const { edgelessRoot } = this;
+
-    await edgelessRoot.surface.updateComplete;
+    const surfaceModel = this.widget.doc.getBlockByFlavour('affine:surface');
+    const surface = this.widget.std.view.getBlock(
+      surfaceModel[0]!.id
+    ) as SurfaceBlockComponent;
+    await surface.updateComplete;
 
     if (!this.widget.anchorBlockId) return;
 
@@ -121,9 +125,11 @@ export class EdgelessWatcher {
       return;
     }
 
-    const { edgelessRoot } = this;
+    const { std } = this.widget;
-    const editing = edgelessRoot.service.selection.editing;
+    const gfx = std.get(GfxControllerIdentifier);
-    const selectedElements = edgelessRoot.service.selection.selectedElements;
+    const { selection } = gfx;
+    const editing = selection.editing;
+    const selectedElements = selection.selectedElements;
     if (editing || selectedElements.length !== 1) {
       this.widget.hide();
       return;
@@ -158,10 +164,6 @@ export class EdgelessWatcher {
     this.widget.dragPreview.style.opacity = altKey ? '1' : '0.5';
   };
 
-  get edgelessRoot() {
-    return this.widget.rootComponent as EdgelessRootBlockComponent;
-  }
-
   get hoverAreaRectTopLevelBlock() {
     const area = this.hoverAreaTopLevelBlock;
     if (!area) return null;
@@ -174,12 +176,11 @@ export class EdgelessWatcher {
 
     if (!edgelessElement) return null;
 
-    const { edgelessRoot } = this;
+    const { std } = this.widget;
+    const gfx = std.get(GfxControllerIdentifier);
+    const { viewport } = gfx;
     const rect = getSelectedRect([edgelessElement]);
-    let [left, top] = edgelessRoot.service.viewport.toViewCoord(
+    let [left, top] = viewport.toViewCoord(rect.left, rect.top);
-      rect.left,
-      rect.top
-    );
     const scale = this.widget.scale.peek();
     const width = rect.width * scale;
     const height = rect.height * scale;
@@ -212,26 +213,23 @@ export class EdgelessWatcher {
 
   watch() {
     const { disposables, std } = this.widget;
-    const gfxController = std.get(GfxControllerIdentifier);
+    const gfx = std.get(GfxControllerIdentifier);
-    const { viewport } = gfxController;
+    const { viewport, selection, tool } = gfx;
-    const edgelessService = std.getService(
+    const edgelessSlots = std.get(EdgelessLegacySlotIdentifier);
-      'affine:page'
-    ) as EdgelessRootService;
-    const edgelessSlots = edgelessService.slots;
 
     disposables.add(
       viewport.viewportUpdated.on(this._handleEdgelessViewPortUpdated)
     );
 
     disposables.add(
-      edgelessService.selection.slots.updated.on(() => {
+      selection.slots.updated.on(() => {
         this.checkTopLevelBlockSelection();
       })
     );
 
     disposables.add(
       effect(() => {
-        const value = gfxController.tool.currentToolOption$.value;
+        const value = tool.currentToolOption$.value;
 
         value && this._handleEdgelessToolUpdated(value);
       })

blocksuite/blocks/src/root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.ts

@@ -1,3 +1,4 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import {
   AutoConnectLeftIcon,
   AutoConnectRightIcon,
@@ -16,6 +17,7 @@ import {
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/utils';
 import { css, html, nothing, type TemplateResult } from 'lit';
 import { state } from 'lit/decorators.js';
@@ -426,7 +428,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
           justifyContent: 'center',
           alignItems: 'center',
         });
-        const components = [];
+        const components: TemplateResult[] = [];
         const count = counts[i];
         const initGap = 24 / count - 24;
         const positions = calculatePosition(
@@ -509,17 +511,19 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
   }
 
   override firstUpdated(): void {
-    const { _disposables, service } = this;
+    const { _disposables, std } = this;
+    const slots = std.get(EdgelessLegacySlotIdentifier);
+    const gfx = std.get(GfxControllerIdentifier);
 
     _disposables.add(
-      service.viewport.viewportUpdated.on(() => {
+      gfx.viewport.viewportUpdated.on(() => {
         this.requestUpdate();
       })
     );
 
     _disposables.add(
-      service.selection.slots.updated.on(() => {
+      gfx.selection.slots.updated.on(() => {
-        const { selectedElements } = service.selection;
+        const { selectedElements } = gfx.selection;
         if (
           !(selectedElements.length === 1 && isNoteBlock(selectedElements[0]))
         ) {
@@ -529,22 +533,22 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
     );
 
     _disposables.add(
-      service.uiEventDispatcher.add('dragStart', () => {
+      std.event.add('dragStart', () => {
         this._dragging = true;
       })
     );
     _disposables.add(
-      service.uiEventDispatcher.add('dragEnd', () => {
+      std.event.add('dragEnd', () => {
         this._dragging = false;
       })
     );
     _disposables.add(
-      service.slots.elementResizeStart.on(() => {
+      slots.elementResizeStart.on(() => {
         this._dragging = true;
       })
     );
     _disposables.add(
-      service.slots.elementResizeEnd.on(() => {
+      slots.elementResizeEnd.on(() => {
         this._dragging = false;
       })
     );

blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/index.ts

@@ -1,3 +1,4 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import { WidgetComponent } from '@blocksuite/block-std';
 import { effect } from '@preact/signals-core';
@@ -58,10 +59,8 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
   }
 
   override firstUpdated() {
-    const {
+    const { disposables, std } = this;
-      disposables,
+    const slots = std.get(EdgelessLegacySlotIdentifier);
-      edgeless: { slots },
-    } = this;
 
     disposables.add(
       slots.navigatorSettingUpdated.on(({ hideToolbar }) => {

blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts

@@ -2,6 +2,7 @@ import type { EditorHost } from '@blocksuite/block-std';
 import {
   createButtonPopper,
   DocModeProvider,
+  EdgelessLegacySlotIdentifier,
   EdgelessRootService,
   EditPropsStore,
   type NavigatorMode,
@@ -134,14 +135,14 @@ export class FramePanelHeader extends WithDisposable(LitElement) {
   private readonly _setEdgelessDisposables = () => {
     if (!this._edgelessRootService) return;
 
+    const slots = this.editorHost.std.get(EdgelessLegacySlotIdentifier);
+
     this._clearEdgelessDisposables();
     this._edgelessDisposables = new DisposableGroup();
     this._edgelessDisposables.add(
-      this._edgelessRootService.slots.navigatorSettingUpdated.on(
+      slots.navigatorSettingUpdated.on(({ fillScreen }) => {
-        ({ fillScreen }) => {
         this._navigatorMode = fillScreen ? 'fill' : 'fit';
-        }
+      })
-      )
     );
   };
 

blocksuite/presets/src/fragments/frame-panel/header/frames-setting-menu.ts

@@ -1,5 +1,9 @@
 import type { EditorHost } from '@blocksuite/block-std';
-import { EdgelessRootService, EditPropsStore } from '@blocksuite/blocks';
+import {
+  EdgelessLegacySlotIdentifier,
+  EdgelessRootService,
+  EditPropsStore,
+} from '@blocksuite/blocks';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, type PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -72,16 +76,20 @@ export const AFFINE_FRAMES_SETTING_MENU = 'affine-frames-setting-menu';
 export class FramesSettingMenu extends WithDisposable(LitElement) {
   static override styles = styles;
 
+  get slots() {
+    return this.editorHost.std.get(EdgelessLegacySlotIdentifier);
+  }
+
   private readonly _onBlackBackgroundChange = (checked: boolean) => {
     this.blackBackground = checked;
-    this._edgelessRootService?.slots.navigatorSettingUpdated.emit({
+    this.slots.navigatorSettingUpdated.emit({
       blackBackground: this.blackBackground,
     });
   };
 
   private readonly _onFillScreenChange = (checked: boolean) => {
     this.fillScreen = checked;
-    this._edgelessRootService?.slots.navigatorSettingUpdated.emit({
+    this.slots.navigatorSettingUpdated.emit({
       fillScreen: this.fillScreen,
     });
     this._editPropsStore.setStorage('presentFillScreen', this.fillScreen);
@@ -89,7 +97,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
 
   private readonly _onHideToolBarChange = (checked: boolean) => {
     this.hideToolbar = checked;
-    this._edgelessRootService?.slots.navigatorSettingUpdated.emit({
+    this.slots.navigatorSettingUpdated.emit({
       hideToolbar: this.hideToolbar,
     });
     this._editPropsStore.setStorage('presentHideToolbar', this.hideToolbar);
@@ -170,7 +178,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
     if (_changedProperties.has('editorHost')) {
       if (this._edgelessRootService) {
         this.disposables.add(
-          this._edgelessRootService.slots.navigatorSettingUpdated.on(
+          this.slots.navigatorSettingUpdated.on(
             ({ blackBackground, hideToolbar }) => {
               if (
                 blackBackground !== undefined &&

tools/utils/src/workspace.gen.ts

@@ -18,6 +18,7 @@ export const PackageList = [
     name: '@blocksuite/affine-block-attachment',
     workspaceDependencies: [
       'blocksuite/affine/block-embed',
+      'blocksuite/affine/block-surface',
       'blocksuite/affine/components',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
@@ -113,6 +114,7 @@ export const PackageList = [
     name: '@blocksuite/affine-block-note',
     workspaceDependencies: [
       'blocksuite/affine/block-embed',
+      'blocksuite/affine/block-surface',
       'blocksuite/affine/components',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',

yarn.lock

@@ -3244,6 +3244,7 @@ __metadata:
   resolution: "@blocksuite/affine-block-attachment@workspace:blocksuite/affine/block-attachment"
   dependencies:
     "@blocksuite/affine-block-embed": "workspace:*"
+    "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
@@ -3407,6 +3408,7 @@ __metadata:
   resolution: "@blocksuite/affine-block-note@workspace:blocksuite/affine/block-note"
   dependencies:
     "@blocksuite/affine-block-embed": "workspace:*"
+    "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"