From df6e17b82fac37e2fcd33a3e6103ba08deb82b25 Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Mon, 21 Apr 2025 10:29:30 +0000
Subject: [PATCH] feat(editor): frame and image extensions (#11849)

Closes: BS-3196
Closes: BS-3197
---
 blocksuite/affine/all/package.json            |  8 +++--
 .../src/blocks/{frame.ts => frame/index.ts}   |  0
 .../affine/all/src/blocks/frame/store.ts      |  1 +
 .../affine/all/src/blocks/frame/view.ts       |  1 +
 .../src/blocks/{image.ts => image/index.ts}   |  0
 .../affine/all/src/blocks/image/store.ts      |  1 +
 .../affine/all/src/blocks/image/view.ts       |  1 +
 blocksuite/affine/blocks/frame/package.json   |  5 ++-
 blocksuite/affine/blocks/frame/src/store.ts   | 14 +++++++++
 blocksuite/affine/blocks/frame/src/view.ts    | 27 ++++++++++++++++
 blocksuite/affine/blocks/frame/tsconfig.json  |  1 +
 blocksuite/affine/blocks/image/package.json   |  5 ++-
 .../blocks/image/src/image-proxy-service.ts   |  1 +
 blocksuite/affine/blocks/image/src/store.ts   | 31 +++++++++++++++++++
 blocksuite/affine/blocks/image/src/view.ts    | 21 +++++++++++++
 blocksuite/affine/blocks/image/tsconfig.json  |  1 +
 .../core/src/blocksuite/manager/store.ts      |  4 +++
 .../core/src/blocksuite/manager/view.ts       |  4 +++
 tools/utils/src/workspace.gen.ts              |  2 ++
 yarn.lock                                     |  2 ++
 20 files changed, 126 insertions(+), 4 deletions(-)
 rename blocksuite/affine/all/src/blocks/{frame.ts => frame/index.ts} (100%)
 create mode 100644 blocksuite/affine/all/src/blocks/frame/store.ts
 create mode 100644 blocksuite/affine/all/src/blocks/frame/view.ts
 rename blocksuite/affine/all/src/blocks/{image.ts => image/index.ts} (100%)
 create mode 100644 blocksuite/affine/all/src/blocks/image/store.ts
 create mode 100644 blocksuite/affine/all/src/blocks/image/view.ts
 create mode 100644 blocksuite/affine/blocks/frame/src/store.ts
 create mode 100644 blocksuite/affine/blocks/frame/src/view.ts
 create mode 100644 blocksuite/affine/blocks/image/src/store.ts
 create mode 100644 blocksuite/affine/blocks/image/src/view.ts

diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json
index 1441fb5b75..5a186099e8 100644
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -115,8 +115,12 @@
     "./blocks/embed": "./src/blocks/embed/index.ts",
     "./blocks/embed/store": "./src/blocks/embed/store.ts",
     "./blocks/embed/view": "./src/blocks/embed/view.ts",
-    "./blocks/frame": "./src/blocks/frame.ts",
-    "./blocks/image": "./src/blocks/image.ts",
+    "./blocks/frame": "./src/blocks/frame/index.ts",
+    "./blocks/frame/store": "./src/blocks/frame/store.ts",
+    "./blocks/frame/view": "./src/blocks/frame/view.ts",
+    "./blocks/image": "./src/blocks/image/index.ts",
+    "./blocks/image/store": "./src/blocks/image/store.ts",
+    "./blocks/image/view": "./src/blocks/image/view.ts",
     "./blocks/latex": "./src/blocks/latex.ts",
     "./blocks/list": "./src/blocks/list.ts",
     "./blocks/note": "./src/blocks/note.ts",
diff --git a/blocksuite/affine/all/src/blocks/frame.ts b/blocksuite/affine/all/src/blocks/frame/index.ts
similarity index 100%
rename from blocksuite/affine/all/src/blocks/frame.ts
rename to blocksuite/affine/all/src/blocks/frame/index.ts
diff --git a/blocksuite/affine/all/src/blocks/frame/store.ts b/blocksuite/affine/all/src/blocks/frame/store.ts
new file mode 100644
index 0000000000..f8b9998930
--- /dev/null
+++ b/blocksuite/affine/all/src/blocks/frame/store.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-frame/store';
diff --git a/blocksuite/affine/all/src/blocks/frame/view.ts b/blocksuite/affine/all/src/blocks/frame/view.ts
new file mode 100644
index 0000000000..c987b8097c
--- /dev/null
+++ b/blocksuite/affine/all/src/blocks/frame/view.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-frame/view';
diff --git a/blocksuite/affine/all/src/blocks/image.ts b/blocksuite/affine/all/src/blocks/image/index.ts
similarity index 100%
rename from blocksuite/affine/all/src/blocks/image.ts
rename to blocksuite/affine/all/src/blocks/image/index.ts
diff --git a/blocksuite/affine/all/src/blocks/image/store.ts b/blocksuite/affine/all/src/blocks/image/store.ts
new file mode 100644
index 0000000000..86f9657e30
--- /dev/null
+++ b/blocksuite/affine/all/src/blocks/image/store.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-image/store';
diff --git a/blocksuite/affine/all/src/blocks/image/view.ts b/blocksuite/affine/all/src/blocks/image/view.ts
new file mode 100644
index 0000000000..2f9aca2213
--- /dev/null
+++ b/blocksuite/affine/all/src/blocks/image/view.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-image/view';
diff --git a/blocksuite/affine/blocks/frame/package.json b/blocksuite/affine/blocks/frame/package.json
index 73d2566f79..85810a6724 100644
--- a/blocksuite/affine/blocks/frame/package.json
+++ b/blocksuite/affine/blocks/frame/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
@@ -33,7 +34,9 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./store": "./src/store.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",
diff --git a/blocksuite/affine/blocks/frame/src/store.ts b/blocksuite/affine/blocks/frame/src/store.ts
new file mode 100644
index 0000000000..000778bd4e
--- /dev/null
+++ b/blocksuite/affine/blocks/frame/src/store.ts
@@ -0,0 +1,14 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { FrameBlockSchemaExtension } from '@blocksuite/affine-model';
+
+export class FrameStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-frame';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register([FrameBlockSchemaExtension]);
+  }
+}
diff --git a/blocksuite/affine/blocks/frame/src/view.ts b/blocksuite/affine/blocks/frame/src/view.ts
new file mode 100644
index 0000000000..448754216f
--- /dev/null
+++ b/blocksuite/affine/blocks/frame/src/view.ts
@@ -0,0 +1,27 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { FrameBlockSpec } from './frame-spec';
+
+export class FrameViewExtension extends ViewExtensionProvider {
+  override name = 'affine-frame';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext): void {
+    super.setup(context);
+    if (
+      context.scope === 'edgeless' ||
+      context.scope === 'preview-edgeless' ||
+      context.scope === 'mobile-edgeless'
+    ) {
+      context.register(FrameBlockSpec);
+    }
+  }
+}
diff --git a/blocksuite/affine/blocks/frame/tsconfig.json b/blocksuite/affine/blocks/frame/tsconfig.json
index 541741e387..4ea19d5c79 100644
--- a/blocksuite/affine/blocks/frame/tsconfig.json
+++ b/blocksuite/affine/blocks/frame/tsconfig.json
@@ -9,6 +9,7 @@
   "references": [
     { "path": "../surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../model" },
     { "path": "../../shared" },
     { "path": "../../widgets/edgeless-toolbar" },
diff --git a/blocksuite/affine/blocks/image/package.json b/blocksuite/affine/blocks/image/package.json
index 7ccebddf64..268f05ba74 100644
--- a/blocksuite/affine/blocks/image/package.json
+++ b/blocksuite/affine/blocks/image/package.json
@@ -13,6 +13,7 @@
     "@blocksuite/affine-block-note": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
@@ -34,7 +35,9 @@
   "exports": {
     ".": "./src/index.ts",
     "./effects": "./src/effects.ts",
-    "./turbo-painter": "./src/turbo/image-painter.worker.ts"
+    "./turbo-painter": "./src/turbo/image-painter.worker.ts",
+    "./store": "./src/store.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",
diff --git a/blocksuite/affine/blocks/image/src/image-proxy-service.ts b/blocksuite/affine/blocks/image/src/image-proxy-service.ts
index 569f7b2cf9..4ba13a4567 100644
--- a/blocksuite/affine/blocks/image/src/image-proxy-service.ts
+++ b/blocksuite/affine/blocks/image/src/image-proxy-service.ts
@@ -3,6 +3,7 @@ import { StoreExtension } from '@blocksuite/store';
 
 import { setImageProxyMiddlewareURL } from './adapters/middleware';
 
+// TODO(@mirone): this should be configured when setup instead of runtime
 export class ImageProxyService extends StoreExtension {
   static override key = 'image-proxy';
 
diff --git a/blocksuite/affine/blocks/image/src/store.ts b/blocksuite/affine/blocks/image/src/store.ts
new file mode 100644
index 0000000000..6456bea0cb
--- /dev/null
+++ b/blocksuite/affine/blocks/image/src/store.ts
@@ -0,0 +1,31 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { ImageBlockSchemaExtension } from '@blocksuite/affine-model';
+import { ImageSelectionExtension } from '@blocksuite/affine-shared/selection';
+import { z } from 'zod';
+
+import { ImageBlockAdapterExtensions } from './adapters/extension';
+import { ImageProxyService } from './image-proxy-service';
+
+const ImageStoreExtensionOptionsSchema = z.object({
+  imageProxyURL: z.string().optional(),
+});
+
+export class ImageStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-image';
+
+  override schema = ImageStoreExtensionOptionsSchema;
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register([
+      ImageBlockSchemaExtension,
+      ImageProxyService,
+      ImageSelectionExtension,
+    ]);
+    context.register(ImageBlockAdapterExtensions);
+    // TODO(@mirone): set image proxy url
+  }
+}
diff --git a/blocksuite/affine/blocks/image/src/view.ts b/blocksuite/affine/blocks/image/src/view.ts
new file mode 100644
index 0000000000..33a022a219
--- /dev/null
+++ b/blocksuite/affine/blocks/image/src/view.ts
@@ -0,0 +1,21 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { ImageBlockSpec } from './image-spec';
+
+export class ImageViewExtension extends ViewExtensionProvider {
+  override name = 'affine-image';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(ImageBlockSpec);
+  }
+}
diff --git a/blocksuite/affine/blocks/image/tsconfig.json b/blocksuite/affine/blocks/image/tsconfig.json
index d0be8cddb5..5a12e6cc6f 100644
--- a/blocksuite/affine/blocks/image/tsconfig.json
+++ b/blocksuite/affine/blocks/image/tsconfig.json
@@ -10,6 +10,7 @@
     { "path": "../note" },
     { "path": "../surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../gfx/turbo-renderer" },
     { "path": "../../model" },
     { "path": "../../shared" },
diff --git a/packages/frontend/core/src/blocksuite/manager/store.ts b/packages/frontend/core/src/blocksuite/manager/store.ts
index c9346d2645..affb2a1b6f 100644
--- a/packages/frontend/core/src/blocksuite/manager/store.ts
+++ b/packages/frontend/core/src/blocksuite/manager/store.ts
@@ -7,6 +7,8 @@ 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 { StoreExtensionManager } from '@blocksuite/affine/ext-loader';
 
 export function createStoreManager() {
@@ -20,6 +22,8 @@ export function createStoreManager() {
     DividerStoreExtension,
     EdgelessTextStoreExtension,
     EmbedStoreExtension,
+    FrameStoreExtension,
+    ImageStoreExtension,
   ]);
 
   return manager;
diff --git a/packages/frontend/core/src/blocksuite/manager/view.ts b/packages/frontend/core/src/blocksuite/manager/view.ts
index 4b1acc3cf6..d8a50e2155 100644
--- a/packages/frontend/core/src/blocksuite/manager/view.ts
+++ b/packages/frontend/core/src/blocksuite/manager/view.ts
@@ -7,6 +7,8 @@ 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 { ViewExtensionManager } from '@blocksuite/affine/ext-loader';
 
 export function createViewManager() {
@@ -20,6 +22,8 @@ export function createViewManager() {
     DividerViewExtension,
     EdgelessTextViewExtension,
     EmbedViewExtension,
+    FrameViewExtension,
+    ImageViewExtension,
   ]);
 
   return manager;
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index d205370c9f..bc937eb1af 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -220,6 +220,7 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
       'blocksuite/affine/widgets/edgeless-toolbar',
@@ -236,6 +237,7 @@ export const PackageList = [
       'blocksuite/affine/blocks/note',
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/gfx/turbo-renderer',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
diff --git a/yarn.lock b/yarn.lock
index 4198243df0..c069322c6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2629,6 +2629,7 @@ __metadata:
   dependencies:
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
@@ -2657,6 +2658,7 @@ __metadata:
     "@blocksuite/affine-block-note": "workspace:*"
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"