refactor(editor): move embed-card-modal to components (#10037)

blocksuite/blocks/src/root-block/utils/index.ts

@@ -1 +1,2 @@
-export * from './callback.js';
+export * from './callback';
+export * from './types';

blocksuite/blocks/src/root-block/utils/types.ts

@@ -0,0 +1,45 @@
+import { BookmarkBlockComponent } from '@blocksuite/affine-block-bookmark';
+import {
+  EmbedFigmaBlockComponent,
+  EmbedGithubBlockComponent,
+  EmbedHtmlBlockComponent,
+  EmbedLinkedDocBlockComponent,
+  EmbedLoomBlockComponent,
+  EmbedSyncedDocBlockComponent,
+  EmbedYoutubeBlockComponent,
+} from '@blocksuite/affine-block-embed';
+import type { BlockComponent } from '@blocksuite/block-std';
+
+export type ExternalEmbedBlockComponent =
+  | BookmarkBlockComponent
+  | EmbedFigmaBlockComponent
+  | EmbedGithubBlockComponent
+  | EmbedLoomBlockComponent
+  | EmbedYoutubeBlockComponent;
+
+export type InternalEmbedBlockComponent =
+  | EmbedLinkedDocBlockComponent
+  | EmbedSyncedDocBlockComponent;
+
+export type LinkableEmbedBlockComponent =
+  | ExternalEmbedBlockComponent
+  | InternalEmbedBlockComponent;
+
+export type BuiltInEmbedBlockComponent =
+  | LinkableEmbedBlockComponent
+  | EmbedHtmlBlockComponent;
+
+export function isEmbedCardBlockComponent(
+  block: BlockComponent
+): block is BuiltInEmbedBlockComponent {
+  return (
+    block instanceof BookmarkBlockComponent ||
+    block instanceof EmbedFigmaBlockComponent ||
+    block instanceof EmbedGithubBlockComponent ||
+    block instanceof EmbedHtmlBlockComponent ||
+    block instanceof EmbedLoomBlockComponent ||
+    block instanceof EmbedYoutubeBlockComponent ||
+    block instanceof EmbedLinkedDocBlockComponent ||
+    block instanceof EmbedSyncedDocBlockComponent
+  );
+}

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts

@@ -1,12 +1,7 @@
-import type {
-  BuiltInEmbedBlockComponent,
-  BuiltInEmbedModel,
-} from '@blocksuite/affine-block-bookmark';
-import {
-  isInternalEmbedModel,
-  toggleEmbedCardEditModal,
-} from '@blocksuite/affine-block-bookmark';
+import {} from '@blocksuite/affine-block-bookmark';
 import {
+  EmbedLinkedDocBlockComponent,
+  EmbedSyncedDocBlockComponent,
   getDocContentWithMaxLength,
   getEmbedCardIcons,
 } from '@blocksuite/affine-block-embed';
@@ -14,6 +9,7 @@ import {
   EdgelessCRUDIdentifier,
   reassociateConnectorsCommand,
 } from '@blocksuite/affine-block-surface';
+import { toggleEmbedCardEditModal } from '@blocksuite/affine-components/embed-card-modal';
 import {
   CaptionIcon,
   CopyIcon,
@@ -23,7 +19,11 @@ import {
   PaletteIcon,
   SmallArrowDownIcon,
 } from '@blocksuite/affine-components/icons';
-import { notifyLinkedDocSwitchedToEmbed } from '@blocksuite/affine-components/notification';
+import {
+  notifyLinkedDocClearedAliases,
+  notifyLinkedDocSwitchedToCard,
+  notifyLinkedDocSwitchedToEmbed,
+} from '@blocksuite/affine-components/notification';
 import { isPeekable, peek } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
 import {
@@ -33,7 +33,9 @@ import {
 import {
   type AliasInfo,
   BookmarkStyles,
+  type BuiltInEmbedModel,
   type EmbedCardStyle,
+  isInternalEmbedModel,
 } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
@@ -69,6 +71,7 @@ import {
   isEmbedLinkedDocBlock,
   isEmbedSyncedDocBlock,
 } from '../../edgeless/utils/query.js';
+import type { BuiltInEmbedBlockComponent } from '../../utils/types';
 
 export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
   static override styles = css`
@@ -287,7 +290,30 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
       this.std.host,
       this.model,
       this._viewType,
-      originalDocInfo
+      originalDocInfo,
+      (std, component) => {
+        if (
+          isEmbedLinkedDocBlock(this.model) &&
+          component instanceof EmbedLinkedDocBlockComponent
+        ) {
+          component.refreshData();
+
+          notifyLinkedDocClearedAliases(std);
+        }
+      },
+      (std, component, props) => {
+        if (
+          isEmbedSyncedDocBlock(this.model) &&
+          component instanceof EmbedSyncedDocBlockComponent
+        ) {
+          component.convertToCard(props);
+
+          notifyLinkedDocSwitchedToCard(std);
+        } else {
+          this.model.doc.updateBlock(this.model, props);
+          component.requestUpdate();
+        }
+      }
     );
 
     track(this.std, this.model, this._viewType, 'OpenedAliasPopup', {

blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts

@@ -1,4 +1,3 @@
-import type { BuiltInEmbedModel } from '@blocksuite/affine-block-bookmark';
 import { isNoteBlock } from '@blocksuite/affine-block-surface';
 import { ConnectorCWithArrowIcon } from '@blocksuite/affine-components/icons';
 import {
@@ -12,6 +11,7 @@ import {
 import type {
   AttachmentBlockModel,
   BrushElementModel,
+  BuiltInEmbedModel,
   ConnectorElementModel,
   EdgelessTextBlockModel,
   FrameBlockModel,

blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/context.ts

@@ -1,6 +1,7 @@
-import type { BuiltInEmbedBlockComponent } from '@blocksuite/affine-block-bookmark';
 import { MenuContext } from '@blocksuite/affine-components/toolbar';
 
+import type { BuiltInEmbedBlockComponent } from '../../utils';
+
 export class EmbedCardToolbarContext extends MenuContext {
   override close = () => {
     this.abortController.abort();

blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts

@@ -1,15 +1,13 @@
 import {
-  type BuiltInEmbedBlockComponent,
-  type BuiltInEmbedModel,
-  isEmbedCardBlockComponent,
-  isInternalEmbedModel,
-  toggleEmbedCardCaptionEditModal,
-  toggleEmbedCardEditModal,
-} from '@blocksuite/affine-block-bookmark';
-import {
+  EmbedLinkedDocBlockComponent,
+  EmbedSyncedDocBlockComponent,
   getDocContentWithMaxLength,
   getEmbedCardIcons,
 } from '@blocksuite/affine-block-embed';
+import {
+  toggleEmbedCardCaptionEditModal,
+  toggleEmbedCardEditModal,
+} from '@blocksuite/affine-components/embed-card-modal';
 import {
   CaptionIcon,
   CopyIcon,
@@ -19,7 +17,11 @@ import {
   PaletteIcon,
   SmallArrowDownIcon,
 } from '@blocksuite/affine-components/icons';
-import { notifyLinkedDocSwitchedToEmbed } from '@blocksuite/affine-components/notification';
+import {
+  notifyLinkedDocClearedAliases,
+  notifyLinkedDocSwitchedToCard,
+  notifyLinkedDocSwitchedToEmbed,
+} from '@blocksuite/affine-components/notification';
 import { isPeekable, peek } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
 import {
@@ -34,9 +36,11 @@ import {
   type AliasInfo,
   type BookmarkBlockModel,
   BookmarkStyles,
+  type BuiltInEmbedModel,
   type EmbedCardStyle,
   type EmbedGithubModel,
   type EmbedLinkedDocModel,
+  isInternalEmbedModel,
   type RootBlockModel,
 } from '@blocksuite/affine-model';
 import {
@@ -76,6 +80,10 @@ import {
   isEmbedSyncedDocBlock,
 } from '../../edgeless/utils/query.js';
 import type { RootBlockComponent } from '../../types.js';
+import {
+  type BuiltInEmbedBlockComponent,
+  isEmbedCardBlockComponent,
+} from '../../utils/types';
 import { BUILT_IN_GROUPS } from './config.js';
 import { EmbedCardToolbarContext } from './context.js';
 import { embedCardToolbarStyle } from './styles.js';
@@ -127,7 +135,35 @@ export class EmbedCardToolbar extends WidgetComponent<
 
     this._hide();
 
-    toggleEmbedCardEditModal(this.host, model, this._viewType, originalDocInfo);
+    toggleEmbedCardEditModal(
+      this.host,
+      model,
+      this._viewType,
+      originalDocInfo,
+      (std, component) => {
+        if (
+          isEmbedLinkedDocBlock(model) &&
+          component instanceof EmbedLinkedDocBlockComponent
+        ) {
+          component.refreshData();
+
+          notifyLinkedDocClearedAliases(std);
+        }
+      },
+      (std, component, props) => {
+        if (
+          isEmbedSyncedDocBlock(model) &&
+          component instanceof EmbedSyncedDocBlockComponent
+        ) {
+          component.convertToCard(props);
+
+          notifyLinkedDocSwitchedToCard(std);
+        } else {
+          this.model.doc.updateBlock(model, props);
+          component.requestUpdate();
+        }
+      }
+    );
 
     track(this.std, model, this._viewType, 'OpenedAliasPopup', {
       control: 'edit',

blocksuite/blocks/src/root-block/widgets/keyboard-toolbar/config.ts

@@ -1,5 +1,4 @@
 import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
-import { toggleEmbedCardCreateModal } from '@blocksuite/affine-block-bookmark';
 import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
 import { insertImagesCommand } from '@blocksuite/affine-block-image';
 import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
@@ -18,6 +17,7 @@ import {
 } from '@blocksuite/affine-block-paragraph';
 import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
 import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
+import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
 import {
   formatBlockCommand,
   formatNativeCommand,

blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts

@@ -1,5 +1,4 @@
 import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
-import { toggleEmbedCardCreateModal } from '@blocksuite/affine-block-bookmark';
 import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view';
 import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
 import {
@@ -13,6 +12,7 @@ import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
 import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
 import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
 import { insertTableBlockCommand } from '@blocksuite/affine-block-table';
+import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
 import {
   ArrowDownBigIcon,
   ArrowUpBigIcon,