Merge d51cc39711 into d451e06e84

frontend/src/components/Terminal.vue

@@ -154,16 +154,17 @@ export default {
         },
 
         removeInput() {
+            const textAfterCursorLength = this.terminalInputBuffer.length - this.cursorPosition;
+            const spaces = " ".repeat(textAfterCursorLength);
             const backspaceCount = this.terminalInputBuffer.length;
             const backspaces = "\b \b".repeat(backspaceCount);
             this.cursorPosition = 0;
-            this.terminal.write(backspaces);
+            this.terminal.write(spaces + backspaces);
             this.terminalInputBuffer = "";
         },
 
         mainTerminalConfig() {
             this.terminal.onKey(e => {
-                const code = e.key.charCodeAt(0);
                 console.debug("Encode: " + JSON.stringify(e.key));
 
                 if (e.key === "\r") {
@@ -180,29 +181,39 @@ export default {
                     this.$root.emitAgent(this.endpoint, "terminalInput", this.name, buffer + e.key, (err) => {
                         this.$root.toastError(err.msg);
                     });
-
-                } else if (code === 127) { // Backspace
+                } else if (e.key === "\u007F") {      // Backspace
                     if (this.cursorPosition > 0) {
-                        this.terminal.write("\b \b");
+                        const trimmedTextBeforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition - 1);
+                        const textAfterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
+                        const clearAfterCursor = " ".repeat(textAfterCursor.length) + "\b \b".repeat(textAfterCursor.length + 1);
+                        this.terminalInputBuffer = trimmedTextBeforeCursor + textAfterCursor;
+                        this.terminal.write(clearAfterCursor + textAfterCursor + "\b".repeat(textAfterCursor.length));
                         this.cursorPosition--;
-                        this.terminalInputBuffer = this.terminalInputBuffer.slice(0, -1);
                     }
                 } else if (e.key === "\u001B\u005B\u0041" || e.key === "\u001B\u005B\u0042") {      // UP OR DOWN
                     // Do nothing
-
                 } else if (e.key === "\u001B\u005B\u0043") {      // RIGHT
-                    // TODO
+                    if (this.cursorPosition < this.terminalInputBuffer.length) {
+                        this.terminal.write(this.terminalInputBuffer[this.cursorPosition]);
+                        this.cursorPosition++;
+                    }
                 } else if (e.key === "\u001B\u005B\u0044") {      // LEFT
-                    // TODO
+                    if (this.cursorPosition > 0) {
+                        this.terminal.write("\b");
+                        this.cursorPosition--;
+                    }
                 } else if (e.key === "\u0003") {      // Ctrl + C
                     console.debug("Ctrl + C");
                     this.$root.emitAgent(this.endpoint, "terminalInput", this.name, e.key);
                     this.removeInput();
+                } else if (e.key === "\u0009" || e.key.startsWith("\u001B")) {      // TAB or other special keys
+                    // Do nothing
                 } else {
+                    const textBeforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition);
+                    const textAfterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
+                    this.terminalInputBuffer = textBeforeCursor + e.key + textAfterCursor;
+                    this.terminal.write(e.key + textAfterCursor + "\b".repeat(textAfterCursor.length));
                     this.cursorPosition++;
-                    this.terminalInputBuffer += e.key;
-                    console.log(this.terminalInputBuffer);
-                    this.terminal.write(e.key);
                 }
             });
         },

package.json

@@ -40,7 +40,7 @@
         "dotenv": "~16.3.2",
         "express": "~4.21.2",
         "express-static-gzip": "~2.1.8",
-        "http-graceful-shutdown": "~3.1.13",
+        "http-graceful-shutdown": "~3.1.14",
         "jsonwebtoken": "~9.0.2",
         "jwt-decode": "~3.1.2",
         "knex": "~2.5.1",
@@ -49,8 +49,8 @@
         "promisify-child-process": "~4.1.2",
         "redbean-node": "~0.3.3",
         "semver": "^7.6.3",
-        "socket.io": "~4.8.0",
-        "socket.io-client": "~4.8.0",
+        "socket.io": "~4.8.1",
+        "socket.io-client": "~4.8.1",
         "timezones-list": "~3.0.3",
         "ts-command-line-args": "~2.5.1",
         "tsx": "~4.19.2",
@@ -59,7 +59,7 @@
     },
     "devDependencies": {
         "@actions/github": "^6.0.0",
-        "@fontsource/jetbrains-mono": "^5.1.1",
+        "@fontsource/jetbrains-mono": "^5.1.2",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
         "@fortawesome/free-regular-svg-icons": "6.4.2",
         "@fortawesome/free-solid-svg-icons": "6.4.2",
@@ -81,19 +81,19 @@
         "cross-env": "~7.0.3",
         "eslint": "~8.50.0",
         "eslint-plugin-jsdoc": "~46.8.2",
-        "eslint-plugin-vue": "~9.17.0",
+        "eslint-plugin-vue": "~9.32.0",
         "prismjs": "~1.29.0",
         "sass": "~1.68.0",
         "typescript": "~5.2.2",
         "unplugin-vue-components": "~0.25.2",
-        "vite": "~5.4.8",
+        "vite": "~5.4.11",
         "vite-plugin-compression": "~0.5.1",
-        "vue": "~3.5.12",
+        "vue": "~3.5.13",
         "vue-eslint-parser": "~9.3.2",
-        "vue-i18n": "~9.5.0",
+        "vue-i18n": "~10.0.5",
         "vue-prism-editor": "2.0.0-alpha.2",
         "vue-qrcode": "~2.2.2",
-        "vue-router": "~4.2.5",
+        "vue-router": "~4.5.0",
         "vue-toastification": "2.0.0-rc.5",
         "wait-on": "^7.2.0",
         "xterm-addon-web-links": "~0.9.0"