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 type { Slot } from '@blocksuite/store';
+import { toGfxBlockComponent } from '@blocksuite/block-std';
 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> }) {
-    return this.std.getService('affine:page');
+  get slots() {
+    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
-    edgelessRoot.tools.setEdgelessTool({
-      type: 'default',
-    });
+    gfx.tool.setTool(
+      // @ts-expect-error FIXME: resolve after gfx tool refactor
+      '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
-        rootService.slots.elementResizeStart.on(() => {
+        this.edgelessSlots.elementResizeStart.on(() => {
           this._isResizing = true;
           this._showOverlay = true;
         })
       );
 
       this._disposables.add(
-        // @ts-expect-error TODO: fix after edgeless slots are migrated to extension
-        rootService.slots.elementResizeEnd.on(() => {
+        this.edgelessSlots.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 {
-  BlockComponent,
-  BlockService,
-  EditorHost,
-} from '@blocksuite/block-std';
+import type { BlockComponent, 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 & {
-      slots: Record<string, Slot>;
-    };
+    return this.std.getService('affine:page');
   }
 
   private _collapsedContent() {
@@ -330,20 +325,24 @@ 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;
         }
       })
     );
 
     _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';
-import { commands } from './commands/index.js';
-import { EdgelessCRUDExtension } from './extensions/crud-extension.js';
-import { SurfaceBlockService } from './surface-service.js';
-import { MindMapView } from './view/mindmap.js';
+} from './adapters/extension';
+import { commands } from './commands';
+import {
+  EdgelessCRUDExtension,
+  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 declare type OpSetType = 'path' | 'fillPath' | 'fillSketch';
+export type OpType = 'move' | 'bcurveTo' | 'lineTo';
+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,13 +1,13 @@
 import {
   EdgelessCRUDIdentifier,
+  EdgelessLegacySlotIdentifier,
   type ElementRenderer,
   elementRenderers,
   type SurfaceBlockModel,
   type SurfaceContext,
 } 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);
         }
       })
     );