feat(editor): insertion and duplication actions for embed synced doc (#11852)

Close [BS-3068](https://linear.app/affine-design/issue/BS-3068/在edgeless-的embed-doc-block上，增加-insert-into-page的选项，类似frame)
Close [BS-3069](https://linear.app/affine-design/issue/BS-3069/edgeless下的-embed，覆盖现在的edit行为-，暂定叫做duplicate-into-a-note，复制一个-note)

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

@@ -1,6 +1,17 @@
 import { toast } from '@blocksuite/affine-components/toast';
 import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
-import { EmbedSyncedDocModel } from '@blocksuite/affine-model';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+  EmbedSyncedDocModel,
+  NoteBlockModel,
+  NoteDisplayMode,
+  type NoteProps,
+} from '@blocksuite/affine-model';
+import {
+  draftSelectedModelsCommand,
+  duplicateSelectedModelsCommand,
+} from '@blocksuite/affine-shared/commands';
 import {
   ActionPlacement,
   EditorSettingProvider,
@@ -13,7 +24,7 @@ import {
   type ToolbarModuleConfig,
   ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
-import { getBlockProps } from '@blocksuite/affine-shared/utils';
+import { getBlockProps, matchModels } from '@blocksuite/affine-shared/utils';
 import { Bound } from '@blocksuite/global/gfx';
 import {
   CaptionIcon,
@@ -21,10 +32,11 @@ import {
   DeleteIcon,
   DuplicateIcon,
   ExpandFullIcon,
+  InsertIntoPageIcon,
   OpenInNewIcon,
 } from '@blocksuite/icons/lit';
 import { BlockFlavourIdentifier, isGfxBlockComponent } from '@blocksuite/std';
-import { type ExtensionType, Slice } from '@blocksuite/store';
+import { type BlockModel, type ExtensionType, Slice } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -192,7 +204,7 @@ const conversionsActionGroup = {
 } as const satisfies ToolbarActionGroup<ToolbarAction>;
 
 const captionAction = {
-  id: 'c.caption',
+  id: 'd.caption',
   tooltip: 'Caption',
   icon: CaptionIcon(),
   run(ctx) {
@@ -269,11 +281,116 @@ const builtinToolbarConfig = {
 
 const builtinSurfaceToolbarConfig = {
   actions: [
+    // TODO(@L-Sun): remove this after impl header toolbar for embed-edgeless-synced-doc
     openDocActionGroup,
     conversionsActionGroup,
+    {
+      id: 'b.insert-to-page',
+      label: 'Insert to page',
+      tooltip: 'Insert to page',
+      icon: InsertIntoPageIcon(),
+      when: ({ std }) =>
+        std.get(FeatureFlagService).getFlag('enable_embed_doc_with_alias'),
+      run: ctx => {
+        const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
+        if (!model) return;
+
+        const lastVisibleNote = ctx.store
+          .getModelsByFlavour('affine:note')
+          .findLast(
+            (note): note is NoteBlockModel =>
+              matchModels(note, [NoteBlockModel]) &&
+              note.props.displayMode !== NoteDisplayMode.EdgelessOnly
+          );
+
+        ctx.doc.captureSync();
+        ctx.chain
+          .pipe(duplicateSelectedModelsCommand, {
+            selectedModels: [model],
+            parentModel: lastVisibleNote,
+          })
+          .run();
+      },
+    },
+    {
+      id: 'c.duplicate-as-note',
+      label: 'Duplicate as note',
+      tooltip:
+        'Duplicate as note to create an editable copy, the original remains unchanged.',
+      icon: DuplicateIcon(),
+      when: ({ std }) =>
+        std.get(FeatureFlagService).getFlag('enable_embed_doc_with_alias'),
+      run: ctx => {
+        const { gfx } = ctx;
+
+        const syncedDocModel = ctx.getCurrentModelByType(EmbedSyncedDocModel);
+        if (!syncedDocModel) return;
+
+        let contentModels: BlockModel[] = [];
+        {
+          const doc = ctx.store.workspace.getDoc(syncedDocModel.props.pageId);
+          // TODO(@L-Sun): clear query cache
+          const store = doc?.getStore({ readonly: true });
+          if (!store) return;
+          contentModels = store
+            .getModelsByFlavour('affine:note')
+            .filter(
+              (note): note is NoteBlockModel =>
+                matchModels(note, [NoteBlockModel]) &&
+                note.props.displayMode !== NoteDisplayMode.EdgelessOnly
+            )
+            .flatMap(note => note.children);
+        }
+        if (contentModels.length === 0) return;
+
+        ctx.doc.captureSync();
+        ctx.chain
+          .pipe(draftSelectedModelsCommand, {
+            selectedModels: contentModels,
+          })
+          .pipe(({ std, draftedModels }, next) => {
+            (async () => {
+              const PADDING = 20;
+              const x =
+                syncedDocModel.elementBound.x +
+                syncedDocModel.elementBound.w +
+                PADDING;
+              const y = syncedDocModel.elementBound.y;
+
+              const children = await draftedModels;
+              const noteId = std.store.addBlock(
+                'affine:note',
+                {
+                  xywh: new Bound(
+                    x,
+                    y,
+                    DEFAULT_NOTE_WIDTH,
+                    DEFAULT_NOTE_HEIGHT
+                  ).serialize(),
+                  displayMode: NoteDisplayMode.EdgelessOnly,
+                } satisfies Partial<NoteProps>,
+                ctx.store.root
+              );
+
+              await std.clipboard.duplicateSlice(
+                Slice.fromModels(std.store, children),
+                std.store,
+                noteId
+              );
+
+              gfx.selection.set({
+                elements: [noteId],
+                editing: false,
+              });
+            })().catch(console.error);
+            return next();
+          })
+          .run();
+      },
+    },
     captionAction,
     {
-      id: 'd.scale',
+      id: 'e.scale',
       content(ctx) {
         const model = ctx.getCurrentBlockByType(
           EmbedSyncedDocBlockComponent

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

@@ -2,4 +2,4 @@ export * from './adapters/index.js';
 export * from './edgeless-clipboard-config';
 export * from './embed-synced-doc-block.js';
 export * from './embed-synced-doc-spec.js';
-export { SYNCED_MIN_HEIGHT, SYNCED_MIN_WIDTH } from './styles.js';
+export { SYNCED_MIN_HEIGHT, SYNCED_MIN_WIDTH } from '@blocksuite/affine-model';

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

@@ -7,9 +7,6 @@ import { css, html, unsafeCSS } from 'lit';
 
 import { embedNoteContentStyles } from '../common/embed-note-content-styles.js';
 
-export const SYNCED_MIN_WIDTH = 370;
-export const SYNCED_MIN_HEIGHT = 64;
-
 export const blockStyles = css`
   affine-embed-synced-doc-block {
     --embed-padding: 24px;

blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts

@@ -1,3 +1,4 @@
+import type { GfxCompatibleProps } from '@blocksuite/std/gfx';
 import { BlockModel } from '@blocksuite/store';
 
 import type { ReferenceInfo } from '../../../consts/doc.js';
@@ -10,7 +11,8 @@ export type EmbedSyncedDocBlockProps = {
   style: EmbedCardStyle;
   caption?: string | null;
   scale?: number;
-} & ReferenceInfo;
+} & ReferenceInfo &
+  GfxCompatibleProps;
 
 export class EmbedSyncedDocModel extends defineEmbedModel<EmbedSyncedDocBlockProps>(
   BlockModel

blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-schema.ts

@@ -7,6 +7,9 @@ import {
   EmbedSyncedDocStyles,
 } from './synced-doc-model.js';
 
+export const SYNCED_MIN_WIDTH = 370;
+export const SYNCED_MIN_HEIGHT = 64;
+
 export const defaultEmbedSyncedDocBlockProps: EmbedSyncedDocBlockProps = {
   pageId: '',
   style: EmbedSyncedDocStyles[0],
@@ -15,6 +18,9 @@ export const defaultEmbedSyncedDocBlockProps: EmbedSyncedDocBlockProps = {
   // title & description aliases
   title: undefined,
   description: undefined,
+  index: 'a0',
+  xywh: `[0,0,${SYNCED_MIN_WIDTH},100]`,
+  lockedBySelf: undefined,
 };
 
 export const EmbedSyncedDocBlockSchema = createEmbedBlockSchema({