added support for multiple text boxes and backspace

examples/text-input/App.jsx

@@ -2,9 +2,12 @@ const React = require('react');
 
 exports.App = () => {
     const [name, setName] = React.useState("");
+    const [age, setAge] = React.useState("");
 
     return <div>
         <label>Hello {name != "" ? name : "World"}</label>
-        <input value={name} onChange={e => setName(e.target.value)} placeholder='Input Text' />
+        <input id="name" value={name} onChange={e => setName(e.target.value)} placeholder='Input Text' />
+        <label>Enter your Age</label>
+        <input id="age" value={age} onChange={e => setAge(e.target.value)} />
     </div>;
 };

packages/muray/muray.cpp

@@ -2,16 +2,88 @@
 #ifdef __LINUX__
 #include <print>
 #endif
+#include <string.h>
+#include <vector>
 #include <node.h>
 #include <raylib.h>
 extern "C" {
     #include "microui.h"
 }
 
 #define FONT_SIZE 20
+#define BUFFER_SIZE 2048
 
 static mu_Context ctx = {0};
-static char input_buf[128];
+
+struct InputField
+{
+    std::string id;
+    std::string buffer;
+
+    std::vector<char> cbuf;
+    InputField(const std::string &_id, const std::string initial = "", int bufsize = BUFFER_SIZE) : 
+    id(_id), buffer(initial), cbuf(bufsize, 0)
+    {
+        strncpy(cbuf.data(), initial.c_str(), bufsize - 1);
+    }
+
+    char *data()
+    {
+        return cbuf.data();
+    }
+
+    int size()
+    {
+        return cbuf.size();
+    }
+
+    void sync()
+    {
+        buffer = cbuf.data();
+    }
+};
+
+struct InputList
+{
+    std::vector<InputField> items;
+
+    void add(const std::string &id, const std::string &initial = "", int bufsize = BUFFER_SIZE)
+    {
+        items.emplace_back(id, initial, bufsize);
+    }
+
+    bool checkID(const std::string &id)
+    {
+        for (auto &field : items)
+        {
+            if(field.id == id)
+                return true;
+        }
+        return false;
+    }
+
+    void render(mu_Context *ctx, char* id, const v8::FunctionCallbackInfo<v8::Value> &args)
+    {
+
+        if(!this->checkID(id)) this->add(id);
+        for (auto &field : items)
+        {
+            if(field.id == id) {
+                int val = mu_textbox(ctx, field.data(), field.size());
+                if (val & MU_RES_CHANGE)
+                {
+                    field.sync();
+                    mu_set_focus(ctx, ctx->last_id);
+                    auto isolate = args.GetIsolate();
+                    args.GetReturnValue().Set(v8::String::NewFromUtf8(isolate, field.data()).ToLocalChecked());
+                }
+            }
+        }
+    }
+};
+
+static InputList inputs;
+
 static mu_Rect unclipped_rect = { 0, 0, 0x1000000, 0x1000000 };
 
 void MuButton(const v8::FunctionCallbackInfo<v8::Value> &args) {
@@ -31,12 +103,8 @@ void MuLabel(const v8::FunctionCallbackInfo<v8::Value> &args) {
 void MuInput(const v8::FunctionCallbackInfo<v8::Value> &args) {
     auto isolate = args.GetIsolate();
     auto context = isolate->GetCurrentContext();
-    int val = mu_textbox(&ctx, input_buf, sizeof(input_buf));
-    if (val & MU_RES_CHANGE)
-    {
-        mu_set_focus(&ctx, ctx.last_id);
-        args.GetReturnValue().Set(v8::String::NewFromUtf8(isolate, input_buf).ToLocalChecked());
-    }
+    auto id = *v8::String::Utf8Value(isolate, args[0]->ToString(context).ToLocalChecked());
+    inputs.render(&ctx, id, args);
 }
 
 void MuBeginWindow(const v8::FunctionCallbackInfo<v8::Value> &args) {
@@ -57,14 +125,20 @@ void MuUpdateInput(const v8::FunctionCallbackInfo<v8::Value> &args) {
         if (IsMouseButtonReleased(button)) mu_input_mouseup  (&ctx, x, y, 1 << button);
     }
 
-    char c;
-    char input[2];
-    if ((c = GetCharPressed()))
-    {
-        input[0] = c;
-        input[1] = '\0';
-        mu_input_text(&ctx, input);
+    int key;
+    while ((key = GetCharPressed())) {
+        mu_input_text(&ctx, (char[2]){(char)key, 0});
     }
+
+    if(IsKeyPressed(KEY_BACKSPACE))  mu_input_keydown(&ctx, MU_KEY_BACKSPACE);
+    if(IsKeyReleased(KEY_BACKSPACE)) mu_input_keyup(&ctx, MU_KEY_BACKSPACE);
+
+    // I might be dumb, but i don't think MicroUI supports up down left right
+    // if(IsKeyPressed(KEY_LEFT))       mu_input_keydown(&ctx, MU_KEY_LEFT);
+    // if(IsKeyReleased(KEY_LEFT))      mu_input_keyup(&ctx, MU_KEY_LEFT);
+
+    // if(IsKeyPressed(KEY_RIGHT))      mu_input_keydown(&ctx, MU_KEY_RIGHT);
+    // if(IsKeyReleased(KEY_RIGHT))     mu_input_keyup(&ctx, MU_KEY_RIGHT);
 }
 
 void MuBegin(const v8::FunctionCallbackInfo<v8::Value> &args) {

packages/murayact/index.js

@@ -164,7 +164,8 @@ function renderElement(element) {
             {
                 let placeholder = element.placeholder || "";
                 muray.mu_label(placeholder);
-                let value = muray.mu_input();
+                if (element.id == undefined || element.id == "") throw "MISSING ID FOR TEXT INPUT";
+                let value = muray.mu_input(element.id);
                 if (value) {
                     const evt = { target: { value } };
                     element.onChange(evt);