feat: add file

close #102

Author: drl990114

apps/linebyline/src/components/EditorArea/Editor.tsx

@@ -56,7 +56,7 @@ function Editor(props: EditorProps) {
           filePath: file.path,
         })
         setContent(text as string)
-      } else if (file.content) {
+      } else if (file.content !== undefined) {
         setContent(file.content)
       }
     }

apps/linebyline/src/components/Explorer/index.tsx

@@ -10,6 +10,8 @@ import { useGlobalCacheData, useOpen } from '@/hooks'
 import { CacheManager } from '@/helper'
 import { Empty, FileTree, List, Popper } from '@/components'
 import styled from 'styled-components'
+import type { RightNavItem } from '../SideBar/SideBarHeader'
+import SideBarHeader from '../SideBar/SideBarHeader'
 
 const RecentListBottom = styled.div`
   padding: 8px;
@@ -24,7 +26,7 @@ const RecentListBottom = styled.div`
 
 const Explorer: FC<ExplorerProps> = (props) => {
   const { t } = useTranslation()
-  const { folderData, activeId, addOpenedFile, setActiveId } = useEditorStore()
+  const { addFile, folderData, activeId, addOpenedFile, setActiveId } = useEditorStore()
   const [popperOpen, setPopperOpen] = useState(false)
   const [cache] = useGlobalCacheData()
   const { openFolderDialog, openFolder } = useOpen()
@@ -49,6 +51,12 @@ const Explorer: FC<ExplorerProps> = (props) => {
     [openFolder],
   )
 
+  const handleRightNavItemClick = useCallback((item: RightNavItem) => {
+    if (item.key === 'addFile') {
+      addFile()
+    }
+  }, [addFile])
+
   const listData = useMemo(
     () =>
       cache.openFolderHistory.map((history: { time: string; path: string }) => ({
@@ -63,10 +71,11 @@ const Explorer: FC<ExplorerProps> = (props) => {
 
   return (
     <Container className={containerCLs}>
-      <div className='explorer-header'>
-        <small>EXPLORER</small>
-        <div className='flex' />
-      </div>
+      <SideBarHeader
+        name='EXPLORER'
+        onRightNavItemClick={handleRightNavItemClick}
+        rightNavItems={[{ iconCls: 'ri-file-add-line', key: 'addFile' }]}
+      />
       <div className='h-full w-full overflow-auto'>
         {folderData && folderData.length > 1 ? (
           <FileTree

apps/linebyline/src/components/SideBar/SideBarHeader.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 2rem;
+  padding: 0 8px;
+  line-height: 2rem;
+  border-bottom: 1px solid ${(props) => props.theme.borderColor};
+`
+
+const SideBarHeader: FC<SideBarHeaderProps> = (props) => {
+  const handleRightNavItemClick = (item: RightNavItem) => {
+    if (props.onRightNavItemClick) {
+      props.onRightNavItemClick(item)
+    }
+  }
+  return (
+    <Container>
+      <small>{props.name}</small>
+      <div className='flex'>
+        {props.rightNavItems?.map((item) => {
+          return (
+            <i
+              key={item.key}
+              className={`icon ${item.iconCls}`}
+              onClick={() => handleRightNavItemClick(item)}
+            />
+          )
+        })}
+      </div>
+    </Container>
+  )
+}
+
+export default SideBarHeader
+
+export interface RightNavItem {
+  iconCls: string
+  key: React.Key
+  [key: string]: any
+}
+
+export interface SideBarHeaderProps {
+  name: string
+  onRightNavItemClick?: (item: RightNavItem) => void
+  rightNavItems?: RightNavItem[]
+}

apps/linebyline/src/helper/filesys.ts

@@ -34,6 +34,7 @@ export const createFile = (opt?: Partial<IFile>): IFile => {
     name: 'Untitled.md',
     kind: 'file',
     path: undefined,
+    content: '',
     ...opt,
   }
 

apps/linebyline/src/stores/useEditorStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import type { IFile } from '@/helper/filesys'
+import { createFile, type IFile } from '@/helper/filesys'
 import type { EditorDelegate } from '@linebyline/editor/types'
 
 const useEditorStore = create<EditorStore>((set, get) => {
@@ -9,6 +9,47 @@ const useEditorStore = create<EditorStore>((set, get) => {
     folderData: null,
     editorCtxMap: new Map(),
 
+    addFile: () => {
+      const untitledFile = createFile()
+      const { activeId, folderData, setActiveId, addOpenedFile } = get()
+      if (activeId && folderData )  {
+        const dfs = (tree: IFile[]) => {
+          for(let i = 0; i < tree.length; i++) {
+            if (tree[i].id === activeId) {
+              tree.splice(i+1, 0, untitledFile)
+              set(state => {
+                return {
+                  ...state,
+                  folderData: [
+                    ...(state.folderData || []),
+                  ]
+                }
+              })
+              setActiveId(untitledFile.id)
+              addOpenedFile(untitledFile.id)
+              return
+            } else if (tree[i]?.children) {
+              dfs(tree[i].children!)
+            }
+          }
+        }
+        dfs(folderData)
+        
+      }  else {
+        set(state => {
+          return {
+            ...state,
+            folderData: [
+              ...(state.folderData || []),
+              untitledFile
+            ]
+          }
+        })
+        setActiveId(untitledFile.id)
+        addOpenedFile(untitledFile.id)
+      }
+    },
+
     setActiveId: (id: string) => {
       set((state) => ({
         ...state,
@@ -71,6 +112,7 @@ interface EditorStore {
   folderData: null | IFile[]
   editorCtxMap: Map<string, EditorDelegate<any>>
   setActiveId: (id: string) => void
+  addFile: () => void
   addOpenedFile: (id: string) => void
   delOpenedFile: (id: string) => void
   setFolderData: (folderData: IFile[]) => void