Replace cell contents with textarea on double click

static/css/app.css

@@ -325,6 +325,10 @@
   text-transform: uppercase;
 }
 
+#results td textarea {
+  color: #000 !important;
+}
+
 #results th:first-child,
 #results td:first-child {
   padding-left: 15px;
@@ -339,7 +343,7 @@
 }
 
 #connection_window {
-  z-index: 2;
+  z-index: 3;
   position: fixed;
   background: #ebeef0;
   top: 0px;

static/index.html

@@ -65,7 +65,7 @@
       </div>
     </div>
   </div>
-
+  
   <div id="connection_window">
     <div class="connection-settings">
       <h1>pgweb</h1>

static/js/app.js

@@ -47,6 +47,12 @@ function escapeHtml(str) {
   return "<span class='null'>null</span>";
 }
 
+function unescapeHtml(str){
+  var e = document.createElement("div");
+  e.innerHTML = str;
+  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
+}
+
 function resetTable() {
   $("#results").
     attr("data-mode", "").
@@ -338,6 +344,26 @@ $(document).ready(function() {
     $(this).addClass("selected");
   });
 
+  $("#results").on("dblclick", "td > div", function() {
+    if ($(this).has("textarea").length > 0) {
+      return;
+    }
+
+    var value = unescapeHtml($(this).html());
+
+    if (!value) {
+      return;
+    }
+
+    var textarea = $("<textarea />").text(value).css("width", $(this).css("width"));
+
+    if (value.split("\n").length >= 3) {
+      textarea.css("height", "200px");
+    }
+
+    $(this).html(textarea).css("max-height", "200px");
+  });
+
   $("#tables").on("click", "li", function() {
     $("#tables li.selected").removeClass("selected");
     $(this).addClass("selected");