note text is now editable

Note.js

@@ -1,12 +1,45 @@
-function Note(){
+
+
+function Note(vnode_init){
+const {note} = vnode_init.attrs;
+let is_editing = false;
+let temp_text = note.text;
+const edit_handler = function(){
+  is_editing = true;
+  };
+const cancel_handler = function(){
+  is_editing = false;
+  };
+const text_change_handler = function(e){
+  temp_text = e.target.value;
+  // prevent redraw, because the temp text is anyway contained in the textarea:
+  // also, the "Save" button is going to cause its own redraw; otherwise clicking it would cause two redraws (and it is noticeable, that's how I knew two redraws were happening)
+  e.redraw = false;
+  };
+const save_handler = function(){
+  note.text = temp_text;
+  is_editing = false;
+  };
 return {
-view: function(vnode){
+view: function(){
-const {note} = vnode.attrs;
+if(is_editing){
+  return m('.note', [
+    m('textarea', {key: 'textarea', onchange: text_change_handler}, note.text),
+    m('.buttons', {key: 'editing-buttons'}, [
+      m('button', {key: 'cancel-button', onclick: cancel_handler}, 'Cancel'),
+      m('button', {key: 'save-button', onclick: save_handler}, 'Save')
+      ])
+    ]);
+  }
+else{
   return m('.note', [
     m('.text', {key: 'text'}, note.text),
-  m('button', {key: 'edit-button'}, 'Edit')
+    m('.buttons', {key: 'viewing-buttons'}, [
+      m('button', {key: 'edit-button', onclick: edit_handler}, 'Edit')
+      ])
     ]);
   }
+}
 };  
 }