feat(editor): surface ref extension (#11902)

Closes: BS-3203

blocksuite/affine/all/package.json

@@ -135,7 +135,9 @@
     "./blocks/paragraph/view": "./src/blocks/paragraph/view.ts",
     "./blocks/root": "./src/blocks/root.ts",
     "./blocks/surface": "./src/blocks/surface.ts",
-    "./blocks/surface-ref": "./src/blocks/surface-ref.ts",
+    "./blocks/surface-ref": "./src/blocks/surface-ref/index.ts",
+    "./blocks/surface-ref/store": "./src/blocks/surface-ref/store.ts",
+    "./blocks/surface-ref/view": "./src/blocks/surface-ref/view.ts",
     "./blocks/table": "./src/blocks/table.ts",
     "./data-view": "./src/data-view/index.ts",
     "./data-view/effects": "./src/data-view/effects.ts",

blocksuite/affine/all/src/__tests__/utils/store.ts

@@ -13,6 +13,7 @@ import { LatexStoreExtension } from '@blocksuite/affine-block-latex/store';
 import { ListStoreExtension } from '@blocksuite/affine-block-list/store';
 import { NoteStoreExtension } from '@blocksuite/affine-block-note/store';
 import { ParagraphStoreExtension } from '@blocksuite/affine-block-paragraph/store';
+import { SurfaceRefStoreExtension } from '@blocksuite/affine-block-surface-ref/store';
 import { StoreExtensionManager } from '@blocksuite/affine-ext-loader';
 
 import { MigratingStoreExtension } from '../../extensions/store';
@@ -33,6 +34,7 @@ const manager = new StoreExtensionManager([
   ListStoreExtension,
   NoteStoreExtension,
   ParagraphStoreExtension,
+  SurfaceRefStoreExtension,
 
   MigratingStoreExtension,
 ]);

blocksuite/affine/all/src/blocks/surface-ref/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-surface-ref/store';

blocksuite/affine/all/src/blocks/surface-ref/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-surface-ref/view';

blocksuite/affine/all/src/extensions/effects.ts

@@ -1,6 +1,5 @@
 import { effects as blockRootEffects } from '@blocksuite/affine-block-root/effects';
 import { effects as blockSurfaceEffects } from '@blocksuite/affine-block-surface/effects';
-import { effects as blockSurfaceRefEffects } from '@blocksuite/affine-block-surface-ref/effects';
 import { effects as blockTableEffects } from '@blocksuite/affine-block-table/effects';
 import { BlockSelection } from '@blocksuite/affine-components/block-selection';
 import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width';
@@ -62,7 +61,6 @@ export function effects() {
   inlineMentionEffects();
 
   blockSurfaceEffects();
-  blockSurfaceRefEffects();
   blockTableEffects();
   blockRootEffects();
 

blocksuite/affine/all/src/extensions/migrating.ts

@@ -11,10 +11,6 @@ import {
   PageSurfaceBlockSpec,
   SurfaceBlockAdapterExtensions,
 } from '@blocksuite/affine-block-surface';
-import {
-  EdgelessSurfaceRefBlockSpec,
-  PageSurfaceRefBlockSpec,
-} from '@blocksuite/affine-block-surface-ref';
 import { TableBlockSpec } from '@blocksuite/affine-block-table';
 import {
   brushToMarkdownAdapterMatcher,
@@ -82,7 +78,6 @@ const CommonBlockSpecs: ExtensionType[] = [
 const PageFirstPartyBlockSpecs: ExtensionType[] = [
   CommonBlockSpecs,
   PageSurfaceBlockSpec,
-  PageSurfaceRefBlockSpec,
 
   ...SurfaceBlockAdapterExtensions,
 ].flat();
@@ -90,7 +85,6 @@ const PageFirstPartyBlockSpecs: ExtensionType[] = [
 const EdgelessFirstPartyBlockSpecs: ExtensionType[] = [
   CommonBlockSpecs,
   EdgelessSurfaceBlockSpec,
-  EdgelessSurfaceRefBlockSpec,
 
   ...EdgelessSurfaceBlockAdapterExtensions,
 ].flat();

blocksuite/affine/all/src/extensions/store.ts

@@ -27,7 +27,6 @@ import {
 } from '@blocksuite/affine-inline-preset';
 import {
   RootBlockSchemaExtension,
-  SurfaceRefBlockSchemaExtension,
   TableBlockSchemaExtension,
   TranscriptionBlockSchemaExtension,
 } from '@blocksuite/affine-model';
@@ -115,7 +114,6 @@ function getPlainTextAdapterExtensions(): ExtensionType[] {
 const MigratingStoreExtensions: ExtensionType[] = [
   RootBlockSchemaExtension,
   SurfaceBlockSchemaExtension,
-  SurfaceRefBlockSchemaExtension,
   TableBlockSchemaExtension,
   TranscriptionBlockSchemaExtension,
 

blocksuite/affine/blocks/edgeless-text/src/view.ts

@@ -17,10 +17,7 @@ export class EdgelessTextViewExtension extends ViewExtensionProvider {
 
   override setup(context: ViewExtensionContext) {
     super.setup(context);
-    const isEdgeless =
+    const isEdgeless = this.isEdgeless(context.scope);
-      context.scope === 'edgeless' ||
-      context.scope === 'preview-edgeless' ||
-      context.scope === 'mobile-edgeless';
 
     if (isEdgeless) {
       context.register([

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

@@ -36,7 +36,9 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./store": "./src/store.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

blocksuite/affine/blocks/surface-ref/src/store.ts

@@ -0,0 +1,14 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { SurfaceRefBlockSchemaExtension } from '@blocksuite/affine-model';
+
+export class SurfaceRefStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-surface-ref-block';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(SurfaceRefBlockSchemaExtension);
+  }
+}

blocksuite/affine/blocks/surface-ref/src/view.ts

@@ -0,0 +1,49 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { SurfaceRefBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockFlavourIdentifier,
+  BlockViewExtension,
+  FlavourExtension,
+} from '@blocksuite/std';
+import { literal } from 'lit/static-html.js';
+
+import { SurfaceRefSlashMenuConfigExtension } from './configs/slash-menu';
+import { surfaceRefToolbarModuleConfig } from './configs/toolbar';
+import { effects } from './effects';
+
+const flavour = SurfaceRefBlockSchema.model.flavour;
+
+export class SurfaceRefViewExtension extends ViewExtensionProvider {
+  override name = 'affine-surface-ref-block';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext): void {
+    super.setup(context);
+    context.register([
+      FlavourExtension(flavour),
+      SurfaceRefSlashMenuConfigExtension,
+    ]);
+    const isEdgeless = this.isEdgeless(context.scope);
+    if (isEdgeless) {
+      context.register([
+        BlockViewExtension(flavour, literal`affine-edgeless-surface-ref`),
+      ]);
+    } else {
+      context.register([
+        BlockViewExtension(flavour, literal`affine-surface-ref`),
+        ToolbarModuleExtension({
+          id: BlockFlavourIdentifier(flavour),
+          config: surfaceRefToolbarModuleConfig,
+        }),
+      ]);
+    }
+  }
+}

blocksuite/affine/ext-loader/src/view-provider.ts

@@ -81,6 +81,19 @@ export class ViewExtensionProvider<
    */
   effect(): void {}
 
+  /**
+   * Check if the scope is edgeless
+   * @param scope - The scope to check
+   * @returns True if the scope is edgeless, false otherwise
+   */
+  isEdgeless = (scope: ViewScope) => {
+    return (
+      scope === 'edgeless' ||
+      scope === 'preview-edgeless' ||
+      scope === 'mobile-edgeless'
+    );
+  };
+
   override setup(context: ViewExtensionContext, options?: Options) {
     super.setup(context, options);
     const constructer = this.constructor as typeof ViewExtensionProvider;

blocksuite/integration-test/src/store.ts

@@ -13,6 +13,7 @@ import { LatexStoreExtension } from '@blocksuite/affine/blocks/latex/store';
 import { ListStoreExtension } from '@blocksuite/affine/blocks/list/store';
 import { NoteStoreExtension } from '@blocksuite/affine/blocks/note/store';
 import { ParagraphStoreExtension } from '@blocksuite/affine/blocks/paragraph/store';
+import { SurfaceRefStoreExtension } from '@blocksuite/affine/blocks/surface-ref/store';
 import { StoreExtensionManager } from '@blocksuite/affine/ext-loader';
 import { MigratingStoreExtension } from '@blocksuite/affine/extensions/store';
 
@@ -32,6 +33,7 @@ const manager = new StoreExtensionManager([
   ListStoreExtension,
   NoteStoreExtension,
   ParagraphStoreExtension,
+  SurfaceRefStoreExtension,
 
   MigratingStoreExtension,
 ]);

blocksuite/integration-test/src/view.ts

@@ -13,12 +13,14 @@ import { LatexViewExtension } from '@blocksuite/affine/blocks/latex/view';
 import { ListViewExtension } from '@blocksuite/affine/blocks/list/view';
 import { NoteViewExtension } from '@blocksuite/affine/blocks/note/view';
 import { ParagraphViewExtension } from '@blocksuite/affine/blocks/paragraph/view';
+import { SurfaceRefViewExtension } from '@blocksuite/affine/blocks/surface-ref/view';
 import { ViewExtensionManager } from '@blocksuite/affine/ext-loader';
 import { MigratingViewExtension } from '@blocksuite/affine/extensions/view';
 
 export function getTestViewManager() {
   const manager = new ViewExtensionManager([
     MigratingViewExtension,
+
     AttachmentViewExtension,
     BookmarkViewExtension,
     CalloutViewExtension,
@@ -34,6 +36,7 @@ export function getTestViewManager() {
     ListViewExtension,
     NoteViewExtension,
     ParagraphViewExtension,
+    SurfaceRefViewExtension,
   ]);
   return manager;
 }

packages/frontend/core/src/blocksuite/manager/migrating-store.ts

@@ -13,6 +13,7 @@ import { LatexStoreExtension } from '@blocksuite/affine/blocks/latex/store';
 import { ListStoreExtension } from '@blocksuite/affine/blocks/list/store';
 import { NoteStoreExtension } from '@blocksuite/affine/blocks/note/store';
 import { ParagraphStoreExtension } from '@blocksuite/affine/blocks/paragraph/store';
+import { SurfaceRefStoreExtension } from '@blocksuite/affine/blocks/surface-ref/store';
 import {
   type StoreExtensionContext,
   StoreExtensionManager,
@@ -47,6 +48,7 @@ const manager = new StoreExtensionManager([
   ListStoreExtension,
   NoteStoreExtension,
   ParagraphStoreExtension,
+  SurfaceRefStoreExtension,
 
   MigratingStoreExtension,
   MigratingAffineStoreExtension,

packages/frontend/core/src/blocksuite/manager/migrating-view.ts

@@ -15,6 +15,7 @@ import { ListViewExtension } from '@blocksuite/affine/blocks/list/view';
 import { NoteViewExtension } from '@blocksuite/affine/blocks/note/view';
 import { ParagraphBlockConfigExtension } from '@blocksuite/affine/blocks/paragraph';
 import { ParagraphViewExtension } from '@blocksuite/affine/blocks/paragraph/view';
+import { SurfaceRefViewExtension } from '@blocksuite/affine/blocks/surface-ref/view';
 import {
   type ViewExtensionContext,
   ViewExtensionManager,
@@ -160,6 +161,7 @@ const manager = new ViewExtensionManager([
   ListViewExtension,
   NoteViewExtension,
   ParagraphViewExtension,
+  SurfaceRefViewExtension,
 
   MigratingAffineViewExtension,
 ]);

packages/frontend/core/src/blocksuite/manager/store.ts

@@ -1,38 +0,0 @@
-import { AttachmentStoreExtension } from '@blocksuite/affine/blocks/attachment/store';
-import { BookmarkStoreExtension } from '@blocksuite/affine/blocks/bookmark/store';
-import { CalloutStoreExtension } from '@blocksuite/affine/blocks/callout/store';
-import { CodeStoreExtension } from '@blocksuite/affine/blocks/code/store';
-import { DataViewStoreExtension } from '@blocksuite/affine/blocks/data-view/store';
-import { DatabaseStoreExtension } from '@blocksuite/affine/blocks/database/store';
-import { DividerStoreExtension } from '@blocksuite/affine/blocks/divider/store';
-import { EdgelessTextStoreExtension } from '@blocksuite/affine/blocks/edgeless-text/store';
-import { EmbedStoreExtension } from '@blocksuite/affine/blocks/embed/store';
-import { FrameStoreExtension } from '@blocksuite/affine/blocks/frame/store';
-import { ImageStoreExtension } from '@blocksuite/affine/blocks/image/store';
-import { LatexStoreExtension } from '@blocksuite/affine/blocks/latex/store';
-import { ListStoreExtension } from '@blocksuite/affine/blocks/list/store';
-import { NoteStoreExtension } from '@blocksuite/affine/blocks/note/store';
-import { ParagraphStoreExtension } from '@blocksuite/affine/blocks/paragraph/store';
-import { StoreExtensionManager } from '@blocksuite/affine/ext-loader';
-
-export function createStoreManager() {
-  const manager = new StoreExtensionManager([
-    AttachmentStoreExtension,
-    BookmarkStoreExtension,
-    CalloutStoreExtension,
-    CodeStoreExtension,
-    DataViewStoreExtension,
-    DatabaseStoreExtension,
-    DividerStoreExtension,
-    EdgelessTextStoreExtension,
-    EmbedStoreExtension,
-    FrameStoreExtension,
-    ImageStoreExtension,
-    LatexStoreExtension,
-    ListStoreExtension,
-    NoteStoreExtension,
-    ParagraphStoreExtension,
-  ]);
-
-  return manager;
-}

packages/frontend/core/src/blocksuite/manager/view.ts

@@ -1,38 +0,0 @@
-import { AttachmentViewExtension } from '@blocksuite/affine/blocks/attachment/view';
-import { BookmarkViewExtension } from '@blocksuite/affine/blocks/bookmark/view';
-import { CalloutViewExtension } from '@blocksuite/affine/blocks/callout/view';
-import { CodeBlockViewExtension } from '@blocksuite/affine/blocks/code/view';
-import { DataViewViewExtension } from '@blocksuite/affine/blocks/data-view/view';
-import { DatabaseViewExtension } from '@blocksuite/affine/blocks/database/view';
-import { DividerViewExtension } from '@blocksuite/affine/blocks/divider/view';
-import { EdgelessTextViewExtension } from '@blocksuite/affine/blocks/edgeless-text/view';
-import { EmbedViewExtension } from '@blocksuite/affine/blocks/embed/view';
-import { FrameViewExtension } from '@blocksuite/affine/blocks/frame/view';
-import { ImageViewExtension } from '@blocksuite/affine/blocks/image/view';
-import { LatexViewExtension } from '@blocksuite/affine/blocks/latex/view';
-import { ListViewExtension } from '@blocksuite/affine/blocks/list/view';
-import { NoteViewExtension } from '@blocksuite/affine/blocks/note/view';
-import { ParagraphViewExtension } from '@blocksuite/affine/blocks/paragraph/view';
-import { ViewExtensionManager } from '@blocksuite/affine/ext-loader';
-
-export function createViewManager() {
-  const manager = new ViewExtensionManager([
-    AttachmentViewExtension,
-    BookmarkViewExtension,
-    CalloutViewExtension,
-    CodeBlockViewExtension,
-    DataViewViewExtension,
-    DatabaseViewExtension,
-    DividerViewExtension,
-    EdgelessTextViewExtension,
-    EmbedViewExtension,
-    FrameViewExtension,
-    ImageViewExtension,
-    LatexViewExtension,
-    ListViewExtension,
-    NoteViewExtension,
-    ParagraphViewExtension,
-  ]);
-
-  return manager;
-}