update example to showcase hot reloading

examples/hot_reload.rs

@@ -7,6 +7,7 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     let count = use_state(&cx, || 170);
+    let rsx_code = use_state(&cx, || None);
 
     use_future(&cx, (), move |_| {
         let mut count = count.clone();
@@ -20,23 +21,66 @@ fn app(cx: Scope) -> Element {
 
     cx.render(rsx! {
         div {
-            width: format!("{}px", count),
+            width: "100%",
-            background_color: "#999999",
+            height: "100%",
             onclick: move |_| {
                 count.modify(|count| *count + 10);
             },
-            p{
+
+            div {
+                display: "flex",
+                flex_direction: "row",
+                width: "100%",
+                height: "50%",
+                textarea {
+                    width: "90%",
+                    value: {
+                        if rsx_code.get().is_none() {
+                            let rsx_text_index: RsxTextIndex = cx.consume_context().unwrap();
+                            let read = rsx_text_index.read();
+                            rsx_code.set(Some(read.get(&line_num).unwrap().clone()));
+                        }
+                        (*rsx_code.current()).clone().unwrap()
+                    },
+                    oninput: move |evt| {
+                        rsx_code.set(Some(evt.value.clone()));
+                    },
+                }
+
+                button {
+                    height: "100%",
+                    width: "10%",
+                    onclick: move |_|{
+                        if let Some(code) = rsx_code.get(){
+                            let rsx_text_index: RsxTextIndex = cx.consume_context().unwrap();
+                            rsx_text_index.insert(line_num.clone(), code.clone());
+                        }
+                    },
+                    "submit"
+                }
+            }
+
+            p {
                 "High-Five counter: {count}",
             }
-            Comp{
+
+            div {
+                width: format!("{}px", count),
+                height: "10px",
+                background_color: "red",
+            }
+
+            Comp {
                 color: "#083289"
             }
-            Comp{
+
+            Comp {
                 color: "green"
             }
+
             {
                 (0..10).map(|i| {
-                    cx.render(rsx!{p{"{i}"}})
+                    cx.render(rsx!{p {"{i}"}})
                 })
             }
         }