feat(editor): embed extension (#11848)

Closes: BS-3195

blocksuite/affine/all/package.json

@@ -112,7 +112,9 @@
     "./blocks/edgeless-text": "./src/blocks/edgeless-text/index.ts",
     "./blocks/edgeless-text/store": "./src/blocks/edgeless-text/store.ts",
     "./blocks/edgeless-text/view": "./src/blocks/edgeless-text/view.ts",
-    "./blocks/embed": "./src/blocks/embed.ts",
+    "./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/latex": "./src/blocks/latex.ts",

blocksuite/affine/all/src/blocks/embed/store.ts

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

blocksuite/affine/all/src/blocks/embed/view.ts

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

blocksuite/affine/blocks/embed/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-inline-reference": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
@@ -38,7 +39,9 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts",
+    "./store": "./src/store.ts"
   },
   "files": [
     "src",

blocksuite/affine/blocks/embed/src/embed-figma-block/embed-figma-spec.ts

@@ -24,3 +24,15 @@ export const EmbedFigmaBlockSpec: ExtensionType[] = [
   createBuiltinToolbarConfigExtension(flavour, EmbedFigmaBlockComponent),
   SlashMenuConfigExtension(flavour, embedFigmaSlashMenuConfig),
 ].flat();
+
+export const EmbedFigmaViewExtensions: ExtensionType[] = [
+  FlavourExtension(flavour),
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-figma-block`
+      : literal`affine-embed-figma-block`;
+  }),
+  EmbedFigmaBlockOptionConfig,
+  createBuiltinToolbarConfigExtension(flavour, EmbedFigmaBlockComponent),
+  SlashMenuConfigExtension(flavour, embedFigmaSlashMenuConfig),
+].flat();

blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-spec.ts

@@ -28,3 +28,16 @@ export const EmbedGithubBlockSpec: ExtensionType[] = [
   createBuiltinToolbarConfigExtension(flavour, EmbedGithubBlockComponent),
   SlashMenuConfigExtension(flavour, embedGithubSlashMenuConfig),
 ].flat();
+
+export const EmbedGithubViewExtensions: ExtensionType[] = [
+  FlavourExtension(flavour),
+  EmbedGithubBlockService,
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-github-block`
+      : literal`affine-embed-github-block`;
+  }),
+  EmbedGithubBlockOptionConfig,
+  createBuiltinToolbarConfigExtension(flavour, EmbedGithubBlockComponent),
+  SlashMenuConfigExtension(flavour, embedGithubSlashMenuConfig),
+].flat();

blocksuite/affine/blocks/embed/src/embed-html-block/embed-html-spec.ts

@@ -15,3 +15,12 @@ export const EmbedHtmlBlockSpec: ExtensionType[] = [
   }),
   createBuiltinToolbarConfigExtension(flavour),
 ].flat();
+
+export const EmbedHtmlViewExtensions: ExtensionType[] = [
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-html-block`
+      : literal`affine-embed-html-block`;
+  }),
+  createBuiltinToolbarConfigExtension(flavour),
+].flat();

blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-spec.ts

@@ -21,3 +21,14 @@ export const EmbedIframeBlockSpec: ExtensionType[] = [
   createBuiltinToolbarConfigExtension(flavour),
   SlashMenuConfigExtension(flavour, embedIframeSlashMenuConfig),
 ].flat();
+
+export const EmbedIframeViewExtensions: ExtensionType[] = [
+  FlavourExtension(flavour),
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-iframe-block`
+      : literal`affine-embed-iframe-block`;
+  }),
+  createBuiltinToolbarConfigExtension(flavour),
+  SlashMenuConfigExtension(flavour, embedIframeSlashMenuConfig),
+].flat();

blocksuite/affine/blocks/embed/src/embed-linked-doc-block/embed-linked-doc-spec.ts

@@ -19,3 +19,13 @@ export const EmbedLinkedDocBlockSpec: ExtensionType[] = [
   createBuiltinToolbarConfigExtension(flavour),
   LinkedDocSlashMenuConfigExtension,
 ].flat();
+
+export const EmbedLinkedDocViewExtensions: ExtensionType[] = [
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-linked-doc-block`
+      : literal`affine-embed-linked-doc-block`;
+  }),
+  createBuiltinToolbarConfigExtension(flavour),
+  LinkedDocSlashMenuConfigExtension,
+].flat();

blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-spec.ts

@@ -28,3 +28,16 @@ export const EmbedLoomBlockSpec: ExtensionType[] = [
   createBuiltinToolbarConfigExtension(flavour, EmbedLoomBlockComponent),
   SlashMenuConfigExtension(flavour, embedLoomSlashMenuConfig),
 ].flat();
+
+export const EmbedLoomViewExtensions: ExtensionType[] = [
+  FlavourExtension(flavour),
+  EmbedLoomBlockService,
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-loom-block`
+      : literal`affine-embed-loom-block`;
+  }),
+  EmbedLoomBlockOptionConfig,
+  createBuiltinToolbarConfigExtension(flavour, EmbedLoomBlockComponent),
+  SlashMenuConfigExtension(flavour, embedLoomSlashMenuConfig),
+].flat();

blocksuite/affine/blocks/embed/src/embed-synced-doc-block/embed-synced-doc-spec.ts

@@ -18,3 +18,13 @@ export const EmbedSyncedDocBlockSpec: ExtensionType[] = [
   EmbedSyncedDocBlockAdapterExtensions,
   createBuiltinToolbarConfigExtension(flavour),
 ].flat();
+
+export const EmbedSyncedDocViewExtensions: ExtensionType[] = [
+  FlavourExtension(flavour),
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-synced-doc-block`
+      : literal`affine-embed-synced-doc-block`;
+  }),
+  createBuiltinToolbarConfigExtension(flavour),
+].flat();

blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-spec.ts

@@ -28,3 +28,16 @@ export const EmbedYoutubeBlockSpec: ExtensionType[] = [
   createBuiltinToolbarConfigExtension(flavour, EmbedYoutubeBlockComponent),
   SlashMenuConfigExtension('affine:embed-youtube', embedYoutubeSlashMenuConfig),
 ].flat();
+
+export const EmbedYoutubeViewExtensions: ExtensionType[] = [
+  FlavourExtension(flavour),
+  EmbedYoutubeBlockService,
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-youtube-block`
+      : literal`affine-embed-youtube-block`;
+  }),
+  EmbedYoutubeBlockOptionConfig,
+  createBuiltinToolbarConfigExtension(flavour, EmbedYoutubeBlockComponent),
+  SlashMenuConfigExtension('affine:embed-youtube', embedYoutubeSlashMenuConfig),
+].flat();

blocksuite/affine/blocks/embed/src/store.ts

@@ -0,0 +1,47 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import {
+  EmbedFigmaBlockSchemaExtension,
+  EmbedGithubBlockSchemaExtension,
+  EmbedHtmlBlockSchemaExtension,
+  EmbedIframeBlockSchemaExtension,
+  EmbedLinkedDocBlockSchemaExtension,
+  EmbedLoomBlockSchemaExtension,
+  EmbedSyncedDocBlockSchemaExtension,
+  EmbedYoutubeBlockSchemaExtension,
+} from '@blocksuite/affine-model';
+
+import { EmbedFigmaBlockAdapterExtensions } from './embed-figma-block/adapters/extension';
+import { EmbedGithubBlockAdapterExtensions } from './embed-github-block/adapters/extension';
+import { EmbedIframeBlockAdapterExtensions } from './embed-iframe-block/adapters';
+import { EmbedLinkedDocBlockAdapterExtensions } from './embed-linked-doc-block/adapters/extension';
+import { EmbedLoomBlockAdapterExtensions } from './embed-loom-block/adapters/extension';
+import { EmbedSyncedDocBlockAdapterExtensions } from './embed-synced-doc-block/adapters/extension';
+import { EmbedYoutubeBlockAdapterExtensions } from './embed-youtube-block/adapters/extension';
+
+export class EmbedStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-embed-block';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register([
+      EmbedSyncedDocBlockSchemaExtension,
+      EmbedLinkedDocBlockSchemaExtension,
+      EmbedHtmlBlockSchemaExtension,
+      EmbedIframeBlockSchemaExtension,
+      EmbedGithubBlockSchemaExtension,
+      EmbedFigmaBlockSchemaExtension,
+      EmbedLoomBlockSchemaExtension,
+      EmbedYoutubeBlockSchemaExtension,
+    ]);
+    context.register(EmbedFigmaBlockAdapterExtensions);
+    context.register(EmbedGithubBlockAdapterExtensions);
+    context.register(EmbedYoutubeBlockAdapterExtensions);
+    context.register(EmbedLoomBlockAdapterExtensions);
+    context.register(EmbedIframeBlockAdapterExtensions);
+    context.register(EmbedLinkedDocBlockAdapterExtensions);
+    context.register(EmbedSyncedDocBlockAdapterExtensions);
+  }
+}

blocksuite/affine/blocks/embed/src/view.ts

@@ -0,0 +1,34 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { EmbedFigmaViewExtensions } from './embed-figma-block';
+import { EmbedGithubViewExtensions } from './embed-github-block';
+import { EmbedHtmlViewExtensions } from './embed-html-block';
+import { EmbedIframeViewExtensions } from './embed-iframe-block';
+import { EmbedLinkedDocViewExtensions } from './embed-linked-doc-block';
+import { EmbedLoomViewExtensions } from './embed-loom-block';
+import { EmbedSyncedDocViewExtensions } from './embed-synced-doc-block';
+import { EmbedYoutubeViewExtensions } from './embed-youtube-block';
+export class EmbedViewExtension extends ViewExtensionProvider {
+  override name = 'affine-embed-block';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(EmbedFigmaViewExtensions);
+    context.register(EmbedGithubViewExtensions);
+    context.register(EmbedLoomViewExtensions);
+    context.register(EmbedYoutubeViewExtensions);
+    context.register(EmbedHtmlViewExtensions);
+    context.register(EmbedLinkedDocViewExtensions);
+    context.register(EmbedSyncedDocViewExtensions);
+    context.register(EmbedIframeViewExtensions);
+  }
+}

blocksuite/affine/blocks/embed/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../inlines/reference" },
     { "path": "../../model" },
     { "path": "../../rich-text" },

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

@@ -6,6 +6,7 @@ import { DataViewStoreExtension } from '@blocksuite/affine/blocks/data-view/stor
 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 { StoreExtensionManager } from '@blocksuite/affine/ext-loader';
 
 export function createStoreManager() {
@@ -18,6 +19,7 @@ export function createStoreManager() {
     DatabaseStoreExtension,
     DividerStoreExtension,
     EdgelessTextStoreExtension,
+    EmbedStoreExtension,
   ]);
 
   return manager;

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

@@ -6,6 +6,7 @@ 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 { ViewExtensionManager } from '@blocksuite/affine/ext-loader';
 
 export function createViewManager() {
@@ -18,6 +19,7 @@ export function createViewManager() {
     DatabaseViewExtension,
     DividerViewExtension,
     EdgelessTextViewExtension,
+    EmbedViewExtension,
   ]);
 
   return manager;

tools/utils/src/workspace.gen.ts

@@ -203,6 +203,7 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/inlines/reference',
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',

yarn.lock

@@ -2598,6 +2598,7 @@ __metadata:
   dependencies:
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-inline-reference": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"