Fixing bug with file renaming

Author: murilopolese

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "MicroPython_lab",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Arduino's MicroPython Lab IDE",
 	"main": "index.js",
 	"scripts": {

ui/arduino/components/editor.js

@@ -1,30 +1,31 @@
 function Editor(state, emit) {
-  function editFilename() {
-    emit('start-editing-filename')
-  }
-  let filename = html`
-    <div
-      onclick=${editFilename}
-      >
-      ${state.selectedFile || 'undefined'}
-    </div>
-  `
+  // File icon: disk or board
   let fileIcon = 'icons/Open.svg'
   if (state.isConnected && state.selectedDevice === 'serial') {
     fileIcon = 'icons/Connect.svg'
   }
-  if (state.isEditingFilename) {
-    function saveFileName(e) {
-      emit('save-filename', e.target.value)
+  // Filename input
+  function onBlur(e) {
+    emit('save-filename', e.target.value)
+  }
+  function onKeyDown(e) {
+    if(e.key.toLowerCase() === 'enter') {
+      e.target.blur()
     }
-    filename = html`
-      <input
-        type="text"
-        value=${state.selectedFile || 'undefined'}
-        onchange=${saveFileName}
-        />
-    `
   }
+  /*
+  XXX: If this input is blurred because person clicked on another serial file,
+  it triggers both a `save-filename` and a `select-file` event and
+  filesystem panel will act up. It will require only re-opening it.
+  */
+  let filename = html`
+    <input
+      type="text"
+      value=${state.selectedFile || 'undefined'}
+      onblur=${onBlur}
+      onkeydown=${onKeyDown}
+      />
+  `
   return html`
     <div class="editor-filename">
       ${Icon(fileIcon)}

ui/arduino/store.js

@@ -17,7 +17,6 @@ function store(state, emitter) {
   state.isPortDialogOpen = false
   state.isTerminalOpen = false
   state.isFilesOpen = false
-  state.isEditingFilename = false
   state.isTerminalBound = false
 
   // SERIAL CONNECTION
@@ -201,15 +200,9 @@ function store(state, emitter) {
   })
 
   // NAMING/RENAMING FILE
-  emitter.on('start-editing-filename', () => {
-    log('start-editing-filename')
-    state.isEditingFilename = true
-    emitter.emit('render')
-  })
   emitter.on('save-filename', async (filename) => {
     log('save-filename', filename)
     let oldFilename = state.selectedFile
-    state.isEditingFilename = false
     state.selectedFile = filename
 
     let editor = state.cache(AceEditor, 'editor').editor
@@ -240,10 +233,8 @@ function store(state, emitter) {
     emitter.emit('render')
   })
 
-
   window.addEventListener('resize', () => {
     console.log('resize window')
     state.cache(AceEditor, 'editor').render()
   })
-
 }

ui/arduino/theme.css

@@ -163,6 +163,10 @@ img {
   max-height: 100%;
   padding: 0.5rem;
 }
+.editor-filename input {
+  width: 100%;
+  border: none;
+}
 
 /* PANEL */
 #panel {