Fixed file explorer bugs

apps/remix-ide/src/app/panels/file-panel.js

@@ -65,6 +65,7 @@ module.exports = class Filepanel extends ViewPlugin {
         this.renderComponent()
       }
     }
+    this.reset = false
     this.el = yo`
       <div id="fileExplorerView">
       </div>
@@ -92,14 +93,19 @@ module.exports = class Filepanel extends ViewPlugin {
     this.renderComponent()
   }
 
+  resetFocus (value) {
+    this.reset = value
+    this.renderComponent()
+  }
+
   render () {
     return this.el
   }
 
   renderComponent () {
     ReactDOM.render(
       <div className='remixui_container'>
-        <div className='remixui_fileexplorer'>
+        <div className='remixui_fileexplorer' onClick={() => this.resetFocus(true)}>
           <div className='remixui_fileExplorerTree'>
             <div>
               <div className='pl-2 remixui_treeview' data-id='filePanelFileExplorerTree'>
@@ -109,6 +115,7 @@ module.exports = class Filepanel extends ViewPlugin {
                   filesProvider={this._deps.fileProviders.browser}
                   menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '']}
                   plugin={this}
+                  focusRoot={this.reset}
                 />
               </div>
               <div className='pl-2 filesystemexplorer remixui_treeview'>
@@ -119,6 +126,7 @@ module.exports = class Filepanel extends ViewPlugin {
                     filesProvider={this._deps.fileProviders.localhost}
                     menuItems={['createNewFile', 'createNewFolder']}
                     plugin={this}
+                    focusRoot={this.reset}
                   />
                 }
               </div>

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -16,7 +16,7 @@ import './css/file-explorer.css'
 const queryParams = new QueryParams()
 
 export const FileExplorer = (props: FileExplorerProps) => {
-  const { filesProvider, name, registry, plugin } = props
+  const { filesProvider, name, registry, plugin, focusRoot } = props
   const [state, setState] = useState({
     focusElement: [{
       key: name,
@@ -156,6 +156,15 @@ export const FileExplorer = (props: FileExplorerProps) => {
     filesProvider.event.register('fileRenamed', fileRenamed)
   }, [state.files])
 
+  useEffect(() => {
+    if (focusRoot) {
+      setState(prevState => {
+        return { ...prevState, focusElement: [{ key: name, type: 'folder' }] }
+      })
+      plugin.resetFocus(false)
+    }
+  }, [focusRoot])
+
   const resolveDirectory = async (folderPath, dir: File[], isChild = false): Promise<File[]> => {
     if (!isChild && (state.focusEdit.element === 'browser/blank') && state.focusEdit.isNew && (dir.findIndex(({ path }) => path === 'browser/blank') === -1)) {
       dir = state.focusEdit.type === 'file' ? [...dir, {
@@ -287,15 +296,15 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
     const isDir = state.fileManager.isDirectory(path)
 
-    modal('Delete file', `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, {
+    modal(`Delete ${isDir ? 'folder' : 'file'}`, `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, {
       label: 'Ok',
       fn: async () => {
         try {
           const fileManager = state.fileManager
 
           await fileManager.remove(path)
         } catch (e) {
-          toast(`Failed to remove file ${path}.`)
+          toast(`Failed to remove ${isDir ? 'folder' : 'file'} ${path}.`)
         }
       }
     }, {
@@ -684,6 +693,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const editModeOff = async (content: string) => {
+    if (typeof content === 'string') content = content.trim()
     const parentFolder = extractParentFromKey(state.focusEdit.element)
 
     if (!content || (content.trim() === '')) {
@@ -702,6 +712,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
       }
     } else {
       if (state.focusEdit.lastEdit === content) {
+        editRef.current.textContent = content
         return setState(prevState => {
           return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
         })
@@ -827,7 +838,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
               createNewFolder={handleNewFolderInput}
               deletePath={deletePath}
               renamePath={editModeOn}
-              extractParentFromKey={extractParentFromKey}
               publishToGist={publishToGist}
               pageX={state.focusContext.x}
               pageY={state.focusContext.y}

libs/remix-ui/file-explorer/src/lib/types/index.ts

@@ -4,7 +4,8 @@ export interface FileExplorerProps {
     registry: any,
     filesProvider: any,
     menuItems?: string[],
-    plugin: any
+    plugin: any,
+    focusRoot: boolean
 }
 
 export interface File {