Allow Escape to cancel editing

src/JS.hs

@@ -383,17 +383,23 @@ makeTraitEditor =
       "id"           : textareaUid,
       "class"        : "fullwidth",
       "text"         : content })[0];
+    cancel = function () {
+      $(sectionNode).html("");
+      switchSection(traitNode, "editable"); }
     area.onkeydown = function (event) {
       if (event.keyCode == 13 || event.keyCode == 10) {
         submitTrait(traitNode, itemId, traitId, content, area.value);
-        return false; } };
+        return false; }
+      if (event.keyCode == 27) {
+        cancel();
+        return false; }
+      };
     br = $("<br>")[0];
     a = $("<a>", {
       "href"    : "#",
       "text"    : "cancel" })[0];
     a.onclick = function () {
-      $(sectionNode).html("");
-      switchSection(traitNode, "editable");
+      cancel();
       return false; };
     cancelBtn = $("<span>", {"class":"text-button"})[0];
     info = $("<span>", {"style":"float:right"})[0];
@@ -448,21 +454,26 @@ makeItemNotesEditor =
                       wasEmpty ? "" : content,
                       area.value); };
     saveBtn.onclick = save;
+    cancelBtn = $("<input>", {
+      "value" : "Cancel",
+      "type"  : "button" })[0];
+    cancel = function () {
+      $(sectionNode).html("");
+      switchSection(notesNode, "expanded"); };
+    cancelBtn.onclick = cancel;
     area.onkeydown = function (event) {
       if ((event.keyCode == 13 || event.keyCode == 10) &&
           (event.metaKey || event.ctrlKey)) {
         save();
-        return false; } };
+        return false; }
+      if (event.keyCode == 27) {
+        cancel();
+        return false; }
+      };
     // Can't use $()-generation here because then the <span> would have
     // to be cloned (since we're inserting it multiple times) and I don't
     // know how to do that.
     space = "<span style='margin-left:6px'></span>";
-    cancelBtn = $("<input>", {
-      "value" : "Cancel",
-      "type"  : "button" })[0];
-    cancelBtn.onclick = function () {
-      $(sectionNode).html("");
-      switchSection(notesNode, "expanded"); };
     enter = $("<span>", {
       "class": "edit-field-instruction",
       "text" : "or press Ctrl+Enter to save" })[0];

src/View.hs

@@ -1184,13 +1184,18 @@ emptySpan w = span_ [style_ ("margin-left:" <> w)] mempty
 onEnter :: JS -> Attribute
 onEnter handler = onkeydown_ $
   T.format "if (event.keyCode == 13 || event.keyCode == 10)\
-           \ {{} return false;}" [handler]
+           \ {{} return false;}\n" [handler]
 
 onCtrlEnter :: JS -> Attribute
 onCtrlEnter handler = onkeydown_ $
   T.format "if ((event.keyCode == 13 || event.keyCode == 10) &&\
            \    (event.metaKey || event.ctrlKey))\
-           \ {{} return false;}" [handler]
+           \ {{} return false;}\n" [handler]
+
+onEscape :: JS -> Attribute
+onEscape handler = onkeydown_ $
+  T.format "if (event.keyCode == 27)\
+           \ {{} return false;}\n" [handler]
 
 textInput :: Monad m => [Attribute] -> HtmlT m ()
 textInput attrs = input_ (type_ "text" : attrs)
@@ -1257,7 +1262,8 @@ markdownEditor attr (view mdText -> s) submit cancel instr = do
   textarea_ ([uid_ textareaUid,
               autocomplete_ "off",
               class_ "big fullwidth",
-              onCtrlEnter (submit val) ]
+              onCtrlEnter (submit val),
+              onEscape (JS.assign val s <> cancel) ]
              ++ attr) $
     toHtml s
   button "Save" [] $
@@ -1281,8 +1287,10 @@ smallMarkdownEditor
 smallMarkdownEditor attr (view mdText -> s) submit mbCancel instr = do
   textareaId <- randomLongUid
   let val = JS $ T.format "document.getElementById(\"{}\").value" [textareaId]
-  textarea_ ([class_ "fullwidth", uid_ textareaId, autocomplete_ "off",
-              onEnter (submit val)] ++ attr) $
+  textarea_ ([class_ "fullwidth", uid_ textareaId, autocomplete_ "off"] ++
+             [onEnter (submit val)] ++
+             [onEscape cancel | Just cancel <- [mbCancel]] ++
+             attr) $
     toHtml s
   br_ []
   for_ mbCancel $ \cancel -> do