fix(core): importing template with default mode (#8250)

packages/frontend/core/src/modules/import-template/entities/dialog.ts

@@ -1,8 +1,10 @@
+import type { DocMode } from '@blocksuite/blocks';
 import { Entity, LiveData } from '@toeverything/infra';
 
 interface TemplateOptions {
   templateName: string;
   snapshotUrl: string;
+  templateMode: DocMode;
 }
 
 export class ImportTemplateDialog extends Entity {

packages/frontend/core/src/modules/import-template/services/import.ts

@@ -1,5 +1,5 @@
 import type { WorkspaceFlavour } from '@affine/env/workspace';
-import { ZipTransformer } from '@blocksuite/blocks';
+import { type DocMode, ZipTransformer } from '@blocksuite/blocks';
 import type { WorkspaceMetadata, WorkspacesService } from '@toeverything/infra';
 import { DocsService, Service } from '@toeverything/infra';
 
@@ -10,7 +10,8 @@ export class ImportTemplateService extends Service {
 
   async importToWorkspace(
     workspaceMetadata: WorkspaceMetadata,
-    docBinary: Uint8Array
+    docBinary: Uint8Array,
+    mode: DocMode
   ) {
     const { workspace, dispose: disposeWorkspace } =
       this.workspacesService.open({
@@ -26,7 +27,7 @@ export class ImportTemplateService extends Service {
     const docsService = workspace.scope.get(DocsService);
     if (importedDoc) {
       // only support page mode for now
-      docsService.list.setPrimaryMode(importedDoc.id, 'page');
+      docsService.list.setPrimaryMode(importedDoc.id, mode);
       disposeWorkspace();
       return importedDoc.id;
     } else {
@@ -38,6 +39,7 @@ export class ImportTemplateService extends Service {
     flavour: WorkspaceFlavour,
     workspaceName: string,
     docBinary: Uint8Array
+    // todo: support doc mode on init
   ) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     let docId: string = null!;

packages/frontend/core/src/modules/import-template/views/dialog.tsx

@@ -5,6 +5,7 @@ import { useWorkspaceName } from '@affine/core/components/hooks/use-workspace-in
 import { WorkspaceSelector } from '@affine/core/components/workspace-selector';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import { AllDocsIcon } from '@blocksuite/icons/rc';
 import {
   useLiveData,
@@ -24,10 +25,12 @@ import * as styles from './dialog.css';
 
 const Dialog = ({
   templateName,
+  templateMode,
   snapshotUrl,
   onClose,
 }: {
   templateName: string;
+  templateMode: DocMode;
   snapshotUrl: string;
   onClose?: () => void;
 }) => {
@@ -70,6 +73,8 @@ const Dialog = ({
         '/template/import?' +
           '&name=' +
           templateName +
+          '&mode=' +
+          templateMode +
           '&snapshotUrl=' +
           snapshotUrl
       );
@@ -82,6 +87,7 @@ const Dialog = ({
     onClose,
     snapshotUrl,
     templateName,
+    templateMode,
   ]);
 
   useEffect(() => {
@@ -108,7 +114,8 @@ const Dialog = ({
       try {
         const docId = await importTemplateService.importToWorkspace(
           selectedWorkspace,
-          templateDownloader.data$.value
+          templateDownloader.data$.value,
+          templateMode
         );
         openPage(selectedWorkspace.id, docId);
         onClose?.();
@@ -124,6 +131,7 @@ const Dialog = ({
     openPage,
     selectedWorkspace,
     templateDownloader.data$.value,
+    templateMode,
   ]);
 
   const handleImportToNewWorkspace = useAsyncCallback(async () => {
@@ -235,6 +243,7 @@ export const ImportTemplateDialogProvider = () => {
       {template && (
         <Dialog
           templateName={template.templateName}
+          templateMode={template.templateMode}
           snapshotUrl={template.snapshotUrl}
           onClose={() => importTemplateDialogService.dialog.close()}
         />

packages/frontend/core/src/pages/import-template.tsx

@@ -1,3 +1,4 @@
+import type { DocMode } from '@blocksuite/blocks';
 import { useService } from '@toeverything/infra';
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -12,6 +13,7 @@ export const Component = () => {
   useEffect(() => {
     importTemplateDialogService.dialog.open({
       templateName: searchParams.get('name') ?? '',
+      templateMode: (searchParams.get('mode') as DocMode) ?? 'page',
       snapshotUrl: searchParams.get('snapshotUrl') ?? '',
     });
   }, [importTemplateDialogService.dialog, jumpToIndex, searchParams]);

packages/frontend/core/src/router.tsx

@@ -101,6 +101,7 @@ export const topLevelRoutes = [
           const workspaceId = url.searchParams.get('workspaceId');
           const docId = url.searchParams.get('docId');
           const templateName = url.searchParams.get('name');
+          const templateMode = url.searchParams.get('mode');
           const snapshotUrl = url.searchParams.get('snapshotUrl');
 
           return redirect(
@@ -108,6 +109,7 @@ export const topLevelRoutes = [
               isTemplate: 'true',
               templateName: templateName ?? '',
               snapshotUrl: snapshotUrl ?? '',
+              templateMode: templateMode ?? 'page',
             }).toString()}`
           );
         },