feat: Add preview page

packages/viola/src/components/panes/preview.tsx

@@ -1,13 +1,16 @@
 import { use } from 'react';
 import { ref } from 'valtio';
 
+import { $project } from '../../stores/project';
 import { $viewer } from '../../stores/viewer';
 
 const iframeRef = (el: HTMLIFrameElement | null) => {
   $viewer.iframeElement = el ? ref(el) : undefined;
 };
 
 const PreviewIframe = () => {
+  use($project.setupPromise);
+
   const url = use($viewer.setupServer());
 
   return (

packages/viola/src/components/side-menu.tsx

@@ -32,7 +32,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@v/ui/dropdown';
-import { BookOpen, CirclePlus, MoreHorizontal, Palette } from '@v/ui/icon';
+import {
+  BookOpen,
+  CirclePlus,
+  MoreHorizontal,
+  Palette,
+  Printer,
+} from '@v/ui/icon';
 import { cn } from '@v/ui/lib/utils';
 import {
   Sidebar,
@@ -84,6 +90,13 @@ function ApplicationDropdownMenu({ children }: React.PropsWithChildren) {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
       <DropdownMenuContent side="right" align="start">
+        <DropdownMenuItem asChild>
+          <Link to="/preview">
+            <Printer />
+            <span>Open Print Preview</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
         <DropdownMenuItem inset onClick={printPdf}>
           <span>Print PDF</span>
         </DropdownMenuItem>
@@ -234,8 +247,8 @@ function FileTreeItem({
         variant={typeof item === 'string' ? 'default' : 'heading'}
         asChild
       >
-        {typeof item === 'string' ? (
-          <Link to="/edit/$contentId" params={{ contentId: item }} replace>
+        {file ? (
+          <Link to="/edit/$" params={{ _splat: file.filename }} replace>
             <span className={cn(!file?.summary && 'text-muted-foreground')}>
               {file?.summary || 'Empty file'}
             </span>

packages/viola/src/routeTree.gen.ts

@@ -17,8 +17,9 @@ import { Route as mainLayoutImport } from './routes/(main)/_layout'
 import { Route as DebugAstViewerIndexImport } from './routes/debug/ast-viewer/index'
 import { Route as mainLayoutIndexImport } from './routes/(main)/_layout/index'
 import { Route as mainLayoutThemeImport } from './routes/(main)/_layout/theme'
+import { Route as mainLayoutPreviewImport } from './routes/(main)/_layout/preview'
 import { Route as mainLayoutBibliographyImport } from './routes/(main)/_layout/bibliography'
-import { Route as mainLayoutEditContentIdImport } from './routes/(main)/_layout/edit/$contentId'
+import { Route as mainLayoutEditSplatImport } from './routes/(main)/_layout/edit/$'
 
 // Create Virtual Routes
 
@@ -54,15 +55,21 @@ const mainLayoutThemeRoute = mainLayoutThemeImport.update({
   getParentRoute: () => mainLayoutRoute,
 } as any)
 
+const mainLayoutPreviewRoute = mainLayoutPreviewImport.update({
+  id: '/preview',
+  path: '/preview',
+  getParentRoute: () => mainLayoutRoute,
+} as any)
+
 const mainLayoutBibliographyRoute = mainLayoutBibliographyImport.update({
   id: '/bibliography',
   path: '/bibliography',
   getParentRoute: () => mainLayoutRoute,
 } as any)
 
-const mainLayoutEditContentIdRoute = mainLayoutEditContentIdImport.update({
-  id: '/edit/$contentId',
-  path: '/edit/$contentId',
+const mainLayoutEditSplatRoute = mainLayoutEditSplatImport.update({
+  id: '/edit/$',
+  path: '/edit/$',
   getParentRoute: () => mainLayoutRoute,
 } as any)
 
@@ -91,6 +98,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof mainLayoutBibliographyImport
       parentRoute: typeof mainLayoutImport
     }
+    '/(main)/_layout/preview': {
+      id: '/(main)/_layout/preview'
+      path: '/preview'
+      fullPath: '/preview'
+      preLoaderRoute: typeof mainLayoutPreviewImport
+      parentRoute: typeof mainLayoutImport
+    }
     '/(main)/_layout/theme': {
       id: '/(main)/_layout/theme'
       path: '/theme'
@@ -112,11 +126,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DebugAstViewerIndexImport
       parentRoute: typeof rootRoute
     }
-    '/(main)/_layout/edit/$contentId': {
-      id: '/(main)/_layout/edit/$contentId'
-      path: '/edit/$contentId'
-      fullPath: '/edit/$contentId'
-      preLoaderRoute: typeof mainLayoutEditContentIdImport
+    '/(main)/_layout/edit/$': {
+      id: '/(main)/_layout/edit/$'
+      path: '/edit/$'
+      fullPath: '/edit/$'
+      preLoaderRoute: typeof mainLayoutEditSplatImport
       parentRoute: typeof mainLayoutImport
     }
   }
@@ -126,16 +140,18 @@ declare module '@tanstack/react-router' {
 
 interface mainLayoutRouteChildren {
   mainLayoutBibliographyRoute: typeof mainLayoutBibliographyRoute
+  mainLayoutPreviewRoute: typeof mainLayoutPreviewRoute
   mainLayoutThemeRoute: typeof mainLayoutThemeRoute
   mainLayoutIndexRoute: typeof mainLayoutIndexRoute
-  mainLayoutEditContentIdRoute: typeof mainLayoutEditContentIdRoute
+  mainLayoutEditSplatRoute: typeof mainLayoutEditSplatRoute
 }
 
 const mainLayoutRouteChildren: mainLayoutRouteChildren = {
   mainLayoutBibliographyRoute: mainLayoutBibliographyRoute,
+  mainLayoutPreviewRoute: mainLayoutPreviewRoute,
   mainLayoutThemeRoute: mainLayoutThemeRoute,
   mainLayoutIndexRoute: mainLayoutIndexRoute,
-  mainLayoutEditContentIdRoute: mainLayoutEditContentIdRoute,
+  mainLayoutEditSplatRoute: mainLayoutEditSplatRoute,
 }
 
 const mainLayoutRouteWithChildren = mainLayoutRoute._addFileChildren(
@@ -155,54 +171,60 @@ const mainRouteWithChildren = mainRoute._addFileChildren(mainRouteChildren)
 export interface FileRoutesByFullPath {
   '/': typeof mainLayoutIndexRoute
   '/bibliography': typeof mainLayoutBibliographyRoute
+  '/preview': typeof mainLayoutPreviewRoute
   '/theme': typeof mainLayoutThemeRoute
   '/debug/ast-viewer': typeof DebugAstViewerIndexRoute
-  '/edit/$contentId': typeof mainLayoutEditContentIdRoute
+  '/edit/$': typeof mainLayoutEditSplatRoute
 }
 
 export interface FileRoutesByTo {
   '/bibliography': typeof mainLayoutBibliographyRoute
+  '/preview': typeof mainLayoutPreviewRoute
   '/theme': typeof mainLayoutThemeRoute
   '/': typeof mainLayoutIndexRoute
   '/debug/ast-viewer': typeof DebugAstViewerIndexRoute
-  '/edit/$contentId': typeof mainLayoutEditContentIdRoute
+  '/edit/$': typeof mainLayoutEditSplatRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/(main)': typeof mainRouteWithChildren
   '/(main)/_layout': typeof mainLayoutRouteWithChildren
   '/(main)/_layout/bibliography': typeof mainLayoutBibliographyRoute
+  '/(main)/_layout/preview': typeof mainLayoutPreviewRoute
   '/(main)/_layout/theme': typeof mainLayoutThemeRoute
   '/(main)/_layout/': typeof mainLayoutIndexRoute
   '/debug/ast-viewer/': typeof DebugAstViewerIndexRoute
-  '/(main)/_layout/edit/$contentId': typeof mainLayoutEditContentIdRoute
+  '/(main)/_layout/edit/$': typeof mainLayoutEditSplatRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
     | '/bibliography'
+    | '/preview'
     | '/theme'
     | '/debug/ast-viewer'
-    | '/edit/$contentId'
+    | '/edit/$'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/bibliography'
+    | '/preview'
     | '/theme'
     | '/'
     | '/debug/ast-viewer'
-    | '/edit/$contentId'
+    | '/edit/$'
   id:
     | '__root__'
     | '/(main)'
     | '/(main)/_layout'
     | '/(main)/_layout/bibliography'
+    | '/(main)/_layout/preview'
     | '/(main)/_layout/theme'
     | '/(main)/_layout/'
     | '/debug/ast-viewer/'
-    | '/(main)/_layout/edit/$contentId'
+    | '/(main)/_layout/edit/$'
   fileRoutesById: FileRoutesById
 }
 
@@ -241,15 +263,20 @@ export const routeTree = rootRoute
       "parent": "/(main)",
       "children": [
         "/(main)/_layout/bibliography",
+        "/(main)/_layout/preview",
         "/(main)/_layout/theme",
         "/(main)/_layout/",
-        "/(main)/_layout/edit/$contentId"
+        "/(main)/_layout/edit/$"
       ]
     },
     "/(main)/_layout/bibliography": {
       "filePath": "(main)/_layout/bibliography.tsx",
       "parent": "/(main)/_layout"
     },
+    "/(main)/_layout/preview": {
+      "filePath": "(main)/_layout/preview.tsx",
+      "parent": "/(main)/_layout"
+    },
     "/(main)/_layout/theme": {
       "filePath": "(main)/_layout/theme.tsx",
       "parent": "/(main)/_layout"
@@ -261,8 +288,8 @@ export const routeTree = rootRoute
     "/debug/ast-viewer/": {
       "filePath": "debug/ast-viewer/index.tsx"
     },
-    "/(main)/_layout/edit/$contentId": {
-      "filePath": "(main)/_layout/edit/$contentId.tsx",
+    "/(main)/_layout/edit/$": {
+      "filePath": "(main)/_layout/edit/$.tsx",
       "parent": "/(main)/_layout"
     }
   }

packages/viola/src/routes/(main)/_layout/edit/$.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import { ref } from 'valtio';
+
+import { generateId } from '../../../../libs/generate-id';
+import { $content } from '../../../../stores/content';
+import { $project } from '../../../../stores/project';
+import { $ui } from '../../../../stores/ui';
+
+export const Route = createFileRoute('/(main)/_layout/edit/$')({
+  beforeLoad: async ({ params, preload }) => {
+    if (preload) {
+      return;
+    }
+    await $project.setupPromise;
+    const result = $content.getFileByFilename(params._splat || '');
+    const contentId = result?.[0];
+    if (!contentId) {
+      throw redirect({ to: '/' });
+    }
+    if (
+      $ui.tabs.some((tab) => tab.type === 'edit' && tab.contentId === contentId)
+    ) {
+      return;
+    }
+    $ui.tabs = [
+      {
+        id: generateId(),
+        type: 'edit',
+        contentId,
+        title: ref(() => <>Editor</>),
+      },
+    ];
+  },
+});

packages/viola/src/routes/(main)/_layout/preview.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { ref } from 'valtio';
+
+import { generateId } from '../../../libs/generate-id';
+import { $ui } from '../../../stores/ui';
+
+export const Route = createFileRoute('/(main)/_layout/preview')({
+  component: () => null,
+  onEnter: () => {
+    $ui.tabs = [
+      {
+        id: generateId(),
+        type: 'preview',
+        title: ref(() => <>Preview</>),
+      },
+    ];
+  },
+});

packages/viola/src/stores/actions/content-file.ts

@@ -6,7 +6,7 @@ import { ref } from 'valtio';
 import { setupEditor } from '../../libs/editor';
 import { generateId, generateRandomName } from '../../libs/generate-id';
 import { $content, type ContentId } from '../content';
-import { $sandbox } from '../sandbox';
+import { $sandbox, defaultDraftDir } from '../sandbox';
 import { $ui } from '../ui';
 
 export async function createContentFile({
@@ -21,18 +21,20 @@ export async function createContentFile({
   const contentId = generateId<ContentId>();
   const extname = '.md';
   const basename = `${generateRandomName()}${extname}`;
-  const filename = join(prevFileDir || '', basename);
+  const entryPath = join(prevFileDir || defaultDraftDir, basename);
+  const filename = join(
+    $sandbox.vivliostyleConfig.entryContext || '',
+    entryPath,
+  );
   const index =
     ((insertAfter && $content.readingOrder.indexOf(insertAfter)) ?? -1) + 1;
 
   // update sandbox
-  $sandbox.files[
-    join($sandbox.vivliostyleConfig.entryContext || '', filename)
-  ] = ref(new Blob([], { type: 'text/markdown' }));
+  $sandbox.files[filename] = ref(new Blob([], { type: 'text/markdown' }));
   $sandbox.updateVivliostyleConfig((config) => {
     config.entry = [$sandbox.vivliostyleConfig.entry]
       .flat()
-      .toSpliced(index, 0, filename);
+      .toSpliced(index, 0, entryPath);
   });
 
   // update content