App state strings and integers as editable fields

resources/day8/re_frame/trace/main.css

@@ -464,3 +464,16 @@
 #--re-frame-trace-- .re-frame-trace--object > span {
   vertical-align: text-top;
 }
+#--re-frame-trace-- .data-structure-editable.string:before {
+  color: #8f8f8f;
+  content: "\"";
+}
+#--re-frame-trace-- .data-structure-editable.string:after {
+  color: #8f8f8f;
+  content: "\"";
+}
+#--re-frame-trace-- .data-structure-editable input {
+  border: none;
+  border-bottom: 1px #333 dotted;
+  padding: 0;
+}

resources/day8/re_frame/trace/main.less

@@ -596,8 +596,10 @@
       }
     }
 
-    &>span {
+    input {
-      vertical-align: text-top;
+      border: none;
+      border-bottom: 1px #333 dotted;
+      padding: 0;
     }
   }
 }

src/day8/re_frame/trace/app_state.cljs

@@ -11,12 +11,41 @@
        (reduce (fn [acc [property value]]
                  (assoc acc (keyword property) value)) {})))
 
+(defn data-input [{:keys [title on-save on-change on-stop]}]
+  (let [val  (r/atom title)
+        save #(let [v (-> @val str str/trim)]
+                (when (pos? (count v))
+                  (on-save v)))]
+    (fn []
+      [:input {:type        (cond (integer? "number")
+                                  (string?  "text"))
+               :value       @val
+               :size        (if (zero? (count (str @val)))
+                              1
+                              (count (str @val)))
+               :on-change   #(do (reset! val (-> % .-target .-value))
+                                 (on-change %))
+               :on-key-down #(case (.-which %)
+                               13 (save)
+                               nil)}])))
+
+(defn editable
+  [raw]
+  (let [val (r/atom raw)]
+    [:span {:class (str/join " " ["data-structure-editable"
+                                  (when (string? raw) "string")])}
+      [data-input {:title     raw
+                   :on-save   #(js/console.log %)
+                   :on-change #(reset! val (.. % -target -value))}]]))
+
+
 (defn str->hiccup
   [string]
-  (cond (= string "span")   :span
+  (cond (= string "span")              :span
-        (= string "style")  :style
+        (= string "style")             :style
-        (= string ", ")     " "
+        (= string ", ")                " "
-        :else               string))
+        (str/starts-with? string "\"") [editable (str/replace string "\"" "")]
+        :else                          string))
 
 (declare jsonml->hiccup)
 
@@ -45,8 +74,8 @@
          (= "object" (first jsonml))) [data-structure jsonml]
     (array? jsonml)                   (mapv jsonml->hiccup jsonml)
     (object? jsonml)                  {:style (string->css (js->clj jsonml))}
-    (or (string? jsonml)
+    (string? jsonml)                  (str->hiccup jsonml)
-        (integer? jsonml))            (str->hiccup jsonml)))
+    (integer? jsonml)                 [editable jsonml]))
 
 (defn tab [data]
   [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}