refactor(editor): move surface-ref toolbar to its block folder (#10938)

blocksuite/affine/blocks/block-root/src/effects.ts

@@ -101,10 +101,6 @@ import {
   AFFINE_PAGE_DRAGGING_AREA_WIDGET,
   AffinePageDraggingAreaWidget,
 } from './widgets/page-dragging-area/page-dragging-area.js';
-import {
-  AFFINE_SURFACE_REF_TOOLBAR,
-  AffineSurfaceRefToolbar,
-} from './widgets/surface-ref-toolbar/surface-ref-toolbar.js';
 import {
   AFFINE_VIEWPORT_OVERLAY_WIDGET,
   AffineViewportOverlayWidget,
@@ -156,7 +152,6 @@ function registerWidgets() {
     AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
     AffineEdgelessZoomToolbarWidget
   );
-  customElements.define(AFFINE_SURFACE_REF_TOOLBAR, AffineSurfaceRefToolbar);
 }
 
 function registerEdgelessToolbarComponents() {

blocksuite/affine/blocks/block-root/src/widgets/index.ts

@@ -21,6 +21,5 @@ export {
 export { AffineLinkedDocWidget } from './linked-doc/index.js';
 export { AffineModalWidget } from './modal/modal.js';
 export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
-export { AffineSurfaceRefToolbar } from './surface-ref-toolbar/surface-ref-toolbar.js';
 export * from './viewport-overlay/viewport-overlay.js';
 export { AffineFrameTitleWidget } from '@blocksuite/affine-widget-frame-title';

blocksuite/affine/blocks/block-surface-ref/package.json

@@ -21,6 +21,7 @@
     "@blocksuite/icons": "^2.2.6",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
     "@toeverything/theme": "^1.1.12",

blocksuite/affine/blocks/block-surface-ref/src/effects.ts

@@ -2,6 +2,10 @@ import { SurfaceRefGenericBlockPortal } from './portal/generic-block.js';
 import { SurfaceRefNotePortal } from './portal/note.js';
 import { SurfaceRefBlockComponent } from './surface-ref-block.js';
 import { EdgelessSurfaceRefBlockComponent } from './surface-ref-block-edgeless.js';
+import {
+  AFFINE_SURFACE_REF_TOOLBAR,
+  AffineSurfaceRefToolbar,
+} from './widgets/surface-ref-toolbar.js';
 
 export function effects() {
   customElements.define(
@@ -14,4 +18,5 @@ export function effects() {
     EdgelessSurfaceRefBlockComponent
   );
   customElements.define('surface-ref-note-portal', SurfaceRefNotePortal);
+  customElements.define(AFFINE_SURFACE_REF_TOOLBAR, AffineSurfaceRefToolbar);
 }

blocksuite/affine/blocks/block-surface-ref/src/widgets/config.ts

@@ -1,3 +1,4 @@
+import type { SurfaceBlockComponent } from '@blocksuite/affine-block-surface';
 import {
   CopyIcon,
   DeleteIcon,
@@ -6,8 +7,8 @@ import {
 import { toast } from '@blocksuite/affine-components/toast';
 import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar';
 import { downloadBlob } from '@blocksuite/affine-shared/utils';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 
-import type { EdgelessRootPreviewBlockComponent } from '../../edgeless/edgeless-root-preview-block.js';
 import type { SurfaceRefToolbarContext } from './context.js';
 import { edgelessToBlob, writeImageBlobToClipboard } from './utils.js';
 
@@ -28,10 +29,15 @@ export const BUILT_IN_GROUPS: MenuItemGroup<SurfaceRefToolbarContext>[] = [
 
           const referencedModel = ctx.blockComponent.referenceModel;
           const editor = ctx.blockComponent.previewEditor;
-          const edgelessRootElement = editor?.view.getBlock(ctx.doc.root.id);
+          const surfaceModel = editor?.std.get(GfxControllerIdentifier).surface;
-          const surfaceRenderer = (
+          if (!surfaceModel) {
-            edgelessRootElement as EdgelessRootPreviewBlockComponent
+            ctx.close();
-          )?.surface?.renderer;
+            return;
+          }
+          const surfaceBlock = editor?.std.view.getBlock(
+            surfaceModel.id
+          ) as SurfaceBlockComponent;
+          const surfaceRenderer = surfaceBlock.renderer;
 
           if (!surfaceRenderer) {
             ctx.close();
@@ -62,10 +68,15 @@ export const BUILT_IN_GROUPS: MenuItemGroup<SurfaceRefToolbarContext>[] = [
 
           const referencedModel = ctx.blockComponent.referenceModel;
           const editor = ctx.blockComponent.previewEditor;
-          const edgelessRootElement = editor?.view.getBlock(ctx.doc.root.id);
+          const surfaceModel = editor?.std.get(GfxControllerIdentifier).surface;
-          const surfaceRenderer = (
+          if (!surfaceModel) {
-            edgelessRootElement as EdgelessRootPreviewBlockComponent
+            ctx.close();
-          )?.surface?.renderer;
+            return;
+          }
+          const surfaceBlock = editor?.std.view.getBlock(
+            surfaceModel.id
+          ) as SurfaceBlockComponent;
+          const surfaceRenderer = surfaceBlock.renderer;
 
           if (!surfaceRenderer) {
             ctx.close();

yarn.lock

@@ -2785,6 +2785,7 @@ __metadata:
     "@blocksuite/icons": "npm:^2.2.6"
     "@blocksuite/inline": "workspace:*"
     "@blocksuite/store": "workspace:*"
+    "@floating-ui/dom": "npm:^1.6.13"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
     "@toeverything/theme": "npm:^1.1.12"