feat: support open a file (#810)

Author: drl990114

apps/desktop/src/components/EditorArea/EmptyState.tsx

@@ -6,9 +6,17 @@ import styled from 'styled-components'
 
 export const EmptyState = memo(() => {
   const { t } = useTranslation()
-  const { openFolderDialog } = useOpen()
+  const { openFolderDialog, openFile } = useOpen()
 
   const startNavItems = [
+    {
+      name: t('file.openDir'),
+      action: openFolderDialog,
+    },
+    {
+      name: t('file.openFile'),
+      action: openFile,
+    },
     {
       name: t('action.create_file'),
       action: () =>
@@ -17,21 +25,16 @@ export const EmptyState = memo(() => {
           content: '',
         }),
     },
-    {
-      name:  t('file.openDir'),
-      action: openFolderDialog,
-    },
   ]
 
   return (
     <Container className='w-full h-full'>
       <div>
-        <p className='nav-title'>{t('file.emptyOpened')}</p>
         <div className='nav-list'>
           {startNavItems.map((item) => (
-            <div className='nav-list__item' key={item.name} onClick={item.action}>
+            <ActionButton key={item.name} onClick={item.action}>
               {item.name}
-            </div>
+            </ActionButton>
           ))}
         </div>
       </div>
@@ -57,7 +60,7 @@ const Container = styled.div`
     align-items: center;
     justify-content: center;
     gap: 8px;
-    min-width: 160px;
+    min-width: 180px;
 
     &__item {
       width: 100%;
@@ -66,3 +69,23 @@ const Container = styled.div`
     }
   }
 `
+
+const ActionButton = styled.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: ${(props) => props.theme.bgColorSecondary};
+  color: ${(props) => props.theme.primaryFontColor};
+
+  &:hover {
+    background-color: ${(props) => props.theme.hoverColor};
+  }
+`

apps/desktop/src/hooks/useOpen.ts

@@ -3,6 +3,8 @@ import { open } from '@tauri-apps/plugin-dialog'
 import { readDirectory } from '@/helper/filesys'
 import { useEditorStore } from '@/stores'
 import useOpenedCacheStore from '@/stores/useOpenedCacheStore'
+import { addExistingMarkdownFileEdit } from '@/services/editor-file'
+import { getFileContent } from '@/services/file-info'
 
 const useOpen = () => {
   const { setFolderData } = useEditorStore()
@@ -28,9 +30,24 @@ const useOpen = () => {
     openFolder(dir)
   }, [openFolder])
 
+  const openFile = useCallback(async () => {
+    const file = await open({ multiple: false, filters: [{ name: 'Markdown', extensions: ['md'] }] })
+    if (typeof file !== 'string') return
+    const fileContent = await getFileContent({ filePath: file })
+    if (!fileContent) return
+    const fileName = file.split('/').pop() || 'new-file.md'
+    await addExistingMarkdownFileEdit({
+      fileName,
+      content: fileContent,
+      path: file,
+    })
+  }
+  , [addRecentWorkspaces, setFolderData])
+
   return {
     openFolderDialog,
     openFolder,
+    openFile,
   }
 }
 

apps/desktop/src/services/editor-file.ts

@@ -7,17 +7,47 @@ interface AddNewMarkdownFileEditParams {
 }
 
 export const addNewMarkdownFileEdit = async (params: AddNewMarkdownFileEditParams) => {
-  const { fileName, content } = params
+  await addMarkdownFileEdit(params)
+}
+
+interface AddExistingMarkdownFileEditParams {
+  fileName: string
+  content: string
+  path: string
+}
+
+export const addExistingMarkdownFileEdit = async (params: AddExistingMarkdownFileEditParams) => {
+  await addNewMarkdownFileEdit(params)
+}
+
+interface AddMarkdownFileEditParams {
+  fileName: string
+  content: string
+  path?: string
+}
+
+export const addMarkdownFileEdit = async (params: AddMarkdownFileEditParams) => {
+  const { fileName } = params
   const newFile = createFile({
     name: fileName,
-    content: content,
+    ...params,
   })
   const { addOpenedFile, setActiveId } = useEditorStore.getState()
   const { setIdStateMap } = useEditorStateStore.getState()
 
   addOpenedFile(newFile.id)
   setActiveId(newFile.id)
-  setIdStateMap(newFile.id, {
-    hasUnsavedChanges: true,
-  })
+  if (params.path) {
+    const state = {
+      hasUnsavedChanges: false,
+      undoDepth: 0,
+    }
+    const { setIdStateMap } = useEditorStateStore.getState()
+
+    setIdStateMap(newFile.id, state)
+  } else {
+    setIdStateMap(newFile.id, {
+      hasUnsavedChanges: true,
+    })
+  }
 }

apps/desktop/src/services/file-info.ts

@@ -0,0 +1,17 @@
+import { invoke } from '@tauri-apps/api/core'
+
+export const getFileContent = async (params: { filePath?: string }) => {
+  const { filePath } = params
+  if (!filePath) {
+    return null
+  }
+  const isExists = await invoke('file_exists', { filePath })
+  if (isExists) {
+    const text = await invoke<string>('get_file_content', {
+      filePath,
+    })
+    return text
+  } else {
+    return null
+  }
+}

locales/en.json

@@ -63,6 +63,7 @@
   "file": {
     "untitled": "untitled",
     "openDir": "Open Folder",
+    "openFile": "Open a File",
     "recentDir": "Recently opened folders",
     "emptyOpened": "No files opened"
   },

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markflowy/theme",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "type": "module",
   "license": "MIT",
   "homepage": "",

packages/theme/src/theme/index.ts

@@ -76,6 +76,7 @@ const styledLightTheme = {
   accentColor: '#0369a1',
   borderColor: '#d7d7dc',
   bgColor: '#f7f7f7',
+  bgColorSecondary: "#e7e7e7",
   hoverColor: '#d7d7dc',
   warnColor: '#e2b340',
   dangerColor: '#dc2626',
@@ -114,6 +115,7 @@ const styledDarkTheme = {
   accentColor: '#1c78aa',
   borderColor: '#363b41',
   bgColor: '#151515',
+  bgColorSecondary: "#252525",
   hoverColor: '#2b2f33',
   warnColor: '#e2b340',
   dangerColor: '#dc2626',