feat(editor): affine to blocksuite doc dnd with prefered card view (#11748)

Close [BS-3070](https://linear.app/affine-design/issue/BS-3070/文档拖动进入edgeless，形成引用时，默认形成embeded的引用，但是记录上次选择)

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

@@ -12,6 +12,7 @@ import {
 import {
   ActionPlacement,
   DocDisplayMetaProvider,
+  EditorSettingProvider,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -33,7 +34,7 @@ import {
   ExpandFullIcon,
   OpenInNewIcon,
 } from '@blocksuite/icons/lit';
-import { BlockFlavourIdentifier } from '@blocksuite/std';
+import { BlockFlavourIdentifier, isGfxBlockComponent } from '@blocksuite/std';
 import { type ExtensionType, Slice } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 import { html } from 'lit';
@@ -213,6 +214,15 @@ const conversionsActionGroup = {
       },
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedLinkedDocBlockComponent);
+
+        if (isGfxBlockComponent(block)) {
+          const editorSetting = ctx.std.getOptional(EditorSettingProvider);
+          editorSetting?.set?.(
+            'docDropCanvasPreferView',
+            'affine:embed-synced-doc'
+          );
+        }
+
         block?.convertToEmbed();
 
         ctx.track('SelectedView', {

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

@@ -3,6 +3,7 @@ import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import { EmbedSyncedDocModel } from '@blocksuite/affine-model';
 import {
   ActionPlacement,
+  EditorSettingProvider,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -21,7 +22,7 @@ import {
   ExpandFullIcon,
   OpenInNewIcon,
 } from '@blocksuite/icons/lit';
-import { BlockFlavourIdentifier } from '@blocksuite/std';
+import { BlockFlavourIdentifier, isGfxBlockComponent } from '@blocksuite/std';
 import { type ExtensionType, Slice } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 import { html } from 'lit';
@@ -30,7 +31,6 @@ import { keyed } from 'lit/directives/keyed.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { EmbedSyncedDocBlockComponent } from '../embed-synced-doc-block';
-
 const trackBaseProps = {
   category: 'linked doc',
   type: 'embed view',
@@ -142,6 +142,14 @@ const conversionsActionGroup = {
       label: 'Card view',
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
+        if (isGfxBlockComponent(block)) {
+          const editorSetting = ctx.std.getOptional(EditorSettingProvider);
+          editorSetting?.set?.(
+            'docDropCanvasPreferView',
+            'affine:embed-linked-doc'
+          );
+        }
+
         block?.convertToCard();
 
         ctx.track('SelectedView', {

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

@@ -117,9 +117,9 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     const nextDepth = this.depth + 1;
     const previewSpecBuilder = SpecProvider._.getSpec(name);
     const currentDisposables = this.disposables;
-    const editorSetting =
-      this.std.getOptional(EditorSettingProvider) ??
-      signal(GeneralSettingSchema.parse({}));
+    const editorSetting = this.std.getOptional(EditorSettingProvider) ?? {
+      setting$: signal(GeneralSettingSchema.parse({})),
+    };
 
     class EmbedSyncedDocWatcher extends LifeCycleWatcher {
       static override key = 'embed-synced-doc-watcher';

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-block.ts

@@ -349,7 +349,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
   private _initWheelEvent() {
     this._disposables.add(
       this.dispatcher.add('wheel', ctx => {
-        const config = this.std.getOptional(EditorSettingProvider);
+        const config = this.std.getOptional(EditorSettingProvider)?.setting$;
         const state = ctx.get('defaultState');
         const e = state.event as WheelEvent;
         const edgelessScrollZoom = config?.peek().edgelessScrollZoom ?? false;

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-preview-block.ts

@@ -169,7 +169,7 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
   }
 
   private get _disableScheduleUpdate() {
-    const editorSetting = this.std.getOptional(EditorSettingProvider);
+    const editorSetting = this.std.getOptional(EditorSettingProvider)?.setting$;
 
     return editorSetting?.peek().edgelessDisableScheduleUpdate ?? false;
   }

blocksuite/affine/shared/src/services/edit-props-store.ts

@@ -98,7 +98,9 @@ export class EditPropsStore extends LifeCycleWatcher {
     );
 
     this.lastProps$ = computed(() => {
-      const editorSetting$ = this.std.getOptional(EditorSettingProvider);
+      const editorSetting$ = this.std.getOptional(
+        EditorSettingProvider
+      )?.setting$;
       const nextProps = mergeWith(
         clonedeep(initProps),
         editorSetting$?.value,

blocksuite/affine/shared/src/services/editor-setting-service.ts

@@ -10,21 +10,32 @@ export const GeneralSettingSchema = z
   .object({
     edgelessScrollZoom: z.boolean().default(false),
     edgelessDisableScheduleUpdate: z.boolean().default(false),
+    docDropCanvasPreferView: z
+      .enum(['affine:embed-linked-doc', 'affine:embed-synced-doc'])
+      .default('affine:embed-synced-doc'),
   })
   .merge(NodePropsSchema);
 
 export type EditorSetting = z.infer<typeof GeneralSettingSchema>;
 
-export const EditorSettingProvider = createIdentifier<
-  Signal<DeepPartial<EditorSetting>>
->('AffineEditorSettingProvider');
+export interface EditorSettingService {
+  setting$: Signal<DeepPartial<EditorSetting>>;
+  set?: (
+    key: keyof EditorSetting,
+    value: EditorSetting[keyof EditorSetting]
+  ) => void;
+}
+
+export const EditorSettingProvider = createIdentifier<EditorSettingService>(
+  'AffineEditorSettingProvider'
+);
 
 export function EditorSettingExtension(
-  signal: Signal<DeepPartial<EditorSetting>>
+  service: EditorSettingService
 ): ExtensionType {
   return {
     setup: di => {
-      di.addImpl(EditorSettingProvider, () => signal);
+      di.addImpl(EditorSettingProvider, () => service);
     },
   };
 }

blocksuite/affine/widgets/drag-handle/src/helpers/preview-helper.ts

@@ -66,14 +66,14 @@ export class PreviewHelper {
     blockIds = blockIds.slice();
 
     const docModeService = std.get(DocModeProvider);
-    const editorSetting = std.get(EditorSettingProvider).peek();
+    const editorSetting = std.get(EditorSettingProvider);
     const query = this._calculateQuery(blockIds as string[]);
     const store = widget.doc.doc.getStore({ query });
     const previewSpec = SpecProvider._.getSpec('preview:page');
-    const settingSignal = signal({ ...editorSetting });
+    const settingSignal = signal({ ...editorSetting.setting$.peek() });
     const extensions = [
       DocModeExtension(docModeService),
-      EditorSettingExtension(settingSignal),
+      EditorSettingExtension({ setting$: settingSignal }),
       {
         setup(di) {
           di.override(

blocksuite/playground/apps/starter/utils/extensions.ts

@@ -25,7 +25,9 @@ export function getTestCommonExtensions(
 ): ExtensionType[] {
   return [
     FontConfigExtension(CommunityCanvasTextFonts),
-    EditorSettingExtension(mockEditorSetting()),
+    EditorSettingExtension({
+      setting$: mockEditorSetting(),
+    }),
     ParseDocUrlExtension(mockParseDocUrlService(editor.doc.workspace)),
     {
       setup: di => {