select annotations, edit notes

static/js/annotation.js

@@ -2,11 +2,6 @@
 
 oml.ui.annotation = function(annotation, $iframe) {
     var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
-        backgroundColor: 'white',
-        color: 'black',
-        fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
-        fontSize: '14px',
-        lineHeight: '21px',
         padding: '8px'
     }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
         click: function(event) {
@@ -16,27 +11,35 @@ oml.ui.annotation = function(annotation, $iframe) {
             })
         }
     })
+    var notes = annotation.notes.length ? annotation.notes.map(function(note) {
+        note.editable = note.user == ''
+        return note
+    }) : [{
+            id: 'A',
+            placeholder: 'Add Note',
+            value: '',
+            editable: true
+        }];
+    console.log(annotation.notes)
     var $note = Ox.ArrayEditable({
         editing: true,
-        items: (annotation.comments || []).map(function(comment) {
-            comment.editable = true
-            return comment
-        }),
+        items: notes,
         type: 'textarea'
     }).css({
         margin: '2px',
         minHeight: '12px'
     }).bindEvent({
         submit: function(data) {
-            var comment = Ox.getObjectById(annotation.comments, data.id)
-            if (comment) {
-                comment.value = data.value
-                comment.modified = (new Date).toISOString()
+            var note = Ox.getObjectById(annotation.notes, data.id)
+            if (note) {
+                note.value = data.value
+                note.modified = (new Date).toISOString()
             } else {
-                annotation.comments.push({
+                annotation.notes.push({
                     created: data.created || (new Date).toISOString(),
                     modified: (new Date).toISOString(),
                     id: data.id,
+                    user: '',
                     value: data.value
                 })
             }
@@ -64,6 +67,7 @@ oml.ui.annotation = function(annotation, $iframe) {
     }
     that.deselect = function() {
         that.removeClass('selected')
+        that.loseFocus()
     }
     that.select = function () {
         let selected = document.querySelector('.OMLAnnotation.selected')