Comments are pretty much done!

marko/page/story-content/components/chapter/component.js

@@ -8,9 +8,37 @@ module.exports = class {
         Message: "Message", 
         Chat: "Chat Message",
       },
+      selectedComment: null,
     }
   }
 
+  onOpenComment(comment, modal) {
+    this.state.selectedComment = comment
+    this.state.modal = modal
+  }
+
+  addComment(comment) {
+    this.updateChapter({
+      comments: this.input.chapter.comments.concat(comment),
+    })
+  }
+
+  editComment(comment) {
+    const comments = this.input.chapter.comments.slice()
+    const index = comments.findIndex(c => c.id === comment.id)
+    if (index != -1) {
+      comments[index] = comment
+    } else {
+      comments.push(comment)
+    }
+
+    this.updateChapter({comments})
+  }
+
+  removeComment(comment) {
+    this.updateChapter({comments: this.input.chapter.comments.filter(c => c.id !== comment.id)})
+  }
+
   updateChapter(data) {
     this.emit("edit", data)
   }

marko/page/story-content/components/chapter/index.marko

@@ -25,6 +25,7 @@
       locked=input.chapter.commentsLocked 
       mode=input.chapter.commentMode 
       user=input.user
+      on-open("onOpenComment", comment)
     />
     <if-permitted if(input.chapter.canComment) user=input.user author=input.chapter.author permission="chapter.edit">
       <div class="add-comment color-menu" on-click("open", "addComment") >Add ${state.commentLabels[input.chapter.commentMode] || "Comment"}</div>
@@ -32,6 +33,8 @@
   </div>
   <edit-chapter-modal enabled=(state.modal === "edit") chapter=input.chapter on-close("close") on-edit("updateChapter") />
   <create-comment-modal enabled=(state.modal === "addComment") chapter=input.chapter user=input.user on-close("close") on-add("addComment") />
+  <edit-comment-modal enabled=(state.modal === "editComment") chapter=input.chapter comment=state.selectedComment user=input.user on-close("close") on-edit("editComment") />
+  <remove-comment-modal enabled=(state.modal === "removeComment") comment=state.selectedComment user=input.user on-close("close") on-remove("removeComment", state.selectedComment) />
   <move-chapter-modal enabled=(state.modal === "move") chapter=input.chapter user=input.user on-close("close") on-move("moveChapter") />
   <remove-chapter-modal enabled=(state.modal === "remove") chapter=input.chapter on-close("close") on-remove("removeChapter") />
 </div>