Allow suggestion editing

Author: ilmartyrk

commentManager.js

@@ -207,3 +207,52 @@ exports.changeCommentText = async (padId, commentId, commentText, authorId) => {
   // save the comment updated back
   await db.set(prefix + padId, comments);
 };
+
+exports.changeComment = async (padId, commentId, commentText, changeFrom, changeTo, authorId, state) => { // eslint-disable max-len
+  if (commentText.length <= 0) {
+    logger.debug(`ignoring attempt to change comment ${commentId} to the empty string`);
+    throw new Error('comment_cannot_be_empty');
+  }
+
+  // Given a comment we update the comment text
+
+  // If we're dealing with comment replies we need to a different query
+  let prefix = 'comments:';
+  if (commentId.substring(0, 7) === 'c-reply') {
+    prefix = 'comment-replies:';
+  }
+
+  // get the entry
+  const comments = await db.get(prefix + padId);
+  if (comments == null || comments[commentId] == null) {
+    logger.debug(`ignoring attempt to edit non-existent comment ${commentId}`);
+    throw new Error('no_such_comment');
+  }
+  if (comments[commentId].author !== authorId) {
+    logger.debug(`author ${authorId} attempted to edit comment ${commentId} ` +
+                 `belonging to author ${comments[commentId].author}`);
+    throw new Error('unauth');
+  }
+  // update the comment text
+  comments[commentId].text = commentText;
+  if (changeTo) {
+    comments[commentId].changeTo = changeTo;
+    if (!comments[commentId].changeFrom) {
+      comments[commentId].changeFrom = changeFrom;
+    }
+  }
+
+  if (comments[commentId].changeTo && !changeTo) {
+    comments[commentId].changeTo = null;
+  }
+
+  if (state) {
+    comments[commentId].changeAccepted = true;
+    comments[commentId].changeReverted = false;
+  } else {
+    comments[commentId].changeAccepted = false;
+    comments[commentId].changeReverted = true;
+  }
+  // save the comment updated back
+  await db.set(prefix + padId, comments);
+};

exportHTML.js

@@ -30,7 +30,7 @@ exports.getLineHTMLForExport = async (hookName, context) => {
   let hasPlugin = false;
   // Load the HTML into a throwaway div instead of calling $.load() to avoid
   // https://github.com/cheeriojs/cheerio/issues/1031
-  //const content = $('<div>').html(context.lineContent);
+  // const content = $('<div>').html(context.lineContent);
   // include links for each comment which we will add content later.
   content.find('span').each(function () {
     const span = $(this);

index.js

@@ -137,6 +137,13 @@ exports.socketio = (hookName, args, cb) => {
       socket.broadcast.to(padId).emit('textCommentUpdated', commentId, commentText);
     }));
 
+    socket.on('updateComment', handler(async (data) => {
+      const {commentId, commentText, authorId, changeFrom, changeTo, changeAcceptedState} = data;
+      const {padId} = await readOnlyManager.getIds(data.padId);
+      await commentManager.changeComment(padId, commentId, commentText, changeFrom, changeTo, authorId, changeAcceptedState); // eslint-disable max-len
+      socket.broadcast.to(padId).emit('commentUpdated', commentId, commentText, changeFrom, changeTo); // eslint-disable max-len
+    }));
+
     socket.on('addCommentReply', handler(async (data) => {
       const {padId} = await readOnlyManager.getIds(data.padId);
       const [replyId, reply] = await commentManager.addCommentReply(padId, data);

static/js/index.js

@@ -166,20 +166,46 @@ EpComments.prototype.init = async function () {
   // Here, it adds a form to edit the comment text
   this.container.parent().on('click', '.comment-edit', function () {
     const $commentBox = $(this).closest('.comment-container');
-    $commentBox.addClass('editing');
 
+    const changeAcceptedState = $commentBox.hasClass('change-accepted');
+    $commentBox.addClass('editing');
+    const changeTo = $commentBox.find('.to-value').first().text();
+    const changeFrom = $commentBox.find('.from-value').first().text();
     const textBox = self.findCommentText($commentBox).last();
+    const commentId = $commentBox.data('commentid');
 
     // if edit form not already there
     if (textBox.siblings('.comment-edit-form').length === 0) {
       // add a form to edit the field
       const data = {};
+      data.changeAcceptedState = changeAcceptedState;
+      data.commentId = commentId;
       data.text = textBox.text();
+      data.changeFrom = changeFrom;
+      data.changeTo = changeTo;
       const content = $('#editCommentTemplate').tmpl(data);
       // localize the comment/reply edit form
       commentL10n.localize(content);
       // insert form
       textBox.before(content);
+      const editForm = textBox.parent().find('.comment-edit-form').first();
+      if (changeTo) {
+        editForm.find('.suggestion').show();
+        editForm.find('.label-suggestion-checkbox')
+            .siblings('input[type="checkbox"]')
+            .prop('checked', true);
+      }
+      editForm.on('change', '.suggestion-checkbox', function () {
+        if ($(this).is(':checked')) {
+          editForm.find('.suggestion').show();
+        } else {
+          editForm.find('.suggestion').hide();
+        }
+      });
+
+      editForm.find('.label-suggestion-checkbox').click(function () {
+        $(this).siblings('input[type="checkbox"]').click();
+      });
     }
   });
 
@@ -191,14 +217,25 @@ EpComments.prototype.init = async function () {
     const $commentForm = $(this).closest('.comment-edit-form');
     const commentId = $commentBox.data('commentid');
     const commentText = $commentForm.find('.comment-edit-text').val();
+    const changeFrom = $commentForm.find('.from-value').first().text();
+    const changeTo = $commentForm.find('.to-value').val();
+
     const data = {};
     data.commentId = commentId;
     data.padId = clientVars.padId;
     data.commentText = commentText;
     data.authorId = clientVars.userId;
+    data.changeFrom = null;
+    data.changeTo = null;
+    if ($commentForm.find('.label-suggestion-checkbox')
+        .siblings('input[type="checkbox"]')
+        .is(':checked')) {
+      data.changeFrom = changeFrom;
+      data.changeTo = changeTo;
+    }
 
     try {
-      await self._send('updateCommentText', data);
+      await self._send('updateComment', data);
     } catch (err) {
       if (err.message !== 'unauth') throw err; // Let the uncaught error handler handle it.
       $.gritter.add({
@@ -212,7 +249,7 @@ EpComments.prototype.init = async function () {
     $commentForm.remove();
     $commentBox.removeClass('editing');
     self.updateCommentBoxText(commentId, commentText);
-
+    self.updateCommentBoxChangeTo(commentId, data);
     // although the comment or reply was saved on the data base successfully, it needs
     // to update the comment or comment reply variable with the new text saved
     self.setCommentOrReplyNewText(commentId, commentText);
@@ -381,6 +418,7 @@ EpComments.prototype.findCommentText = function ($commentBox) {
   return $commentBox.find('.compact-display-content .comment-text, ' +
                           '.full-display-content .comment-title-wrapper .comment-text');
 };
+
 // This function is useful to collect new comments on the collaborators
 EpComments.prototype.collectCommentsAfterSomeIntervalsOfTime = async function () {
   await new Promise((resolve) => window.setTimeout(resolve, 300));
@@ -1165,6 +1203,33 @@ EpComments.prototype.updateCommentBoxText = function (commentId, commentText) {
   textBox.text(commentText);
 };
 
+EpComments.prototype.updateCommentBoxChangeTo = function (commentId, data) {
+  const $comment = this.container.parent().find(`[data-commentid='${commentId}']`);
+  const $suggest = $('#display-suggestion').tmpl(data);
+  if (data.changeTo) {
+    $($suggest[2]).find('.from-label').each((key, item) => {
+      if (item.dataset) {
+        item.dataset.l10nArgs = JSON.stringify({
+          changeFrom: data.changeFrom,
+          changeTo: data.changeTo,
+        });
+      }
+    });
+
+    commentL10n.localize($($suggest[2]));
+    if (!$comment.find('.comment-changeTo-form').length) {
+      const textBox = this.findCommentText($comment);
+      textBox.after($suggest);
+    }
+    $comment.find('.comment-changeTo-form').replaceWith($suggest);
+
+
+    this.container.parent().find(`[data-commentid='${commentId}']`).replaceWith($comment);
+  } else {
+    $comment.find('.comment-changeTo-form').remove();
+  }
+};
+
 EpComments.prototype.showChangeAsAccepted = function (commentId) {
   const self = this;
 
@@ -1197,6 +1262,12 @@ EpComments.prototype.pushComment = function (eventType, callback) {
     this.updateCommentBoxText(commentId, commentText);
   });
 
+  socket.on('commentUpdated', (commentId, commentText, changeFrom, changeTo) => {
+    console.log('commentUpdated', changeFrom, changeTo);
+    this.updateCommentBoxText(commentId, commentText);
+    this.updateCommentBoxChangeTo(commentId, {commentId, commentText, changeFrom, changeTo});
+  });
+
   socket.on('commentDeleted', (commentId) => {
     this.deleteComment(commentId);
   });

templates/comments.html

@@ -131,6 +131,19 @@ <h1 data-l10n-id="ep_comments_page.comment">Comment</h1>
 <script id="editCommentTemplate" type="text/html">
   <div class="comment-edit-form">
     <textarea class="comment-edit-text">${text}</textarea>
+    {{if !changeAcceptedState}}
+    <div class="form-more">
+        <p class="comment-suggest">
+            <input type="checkbox" id="suggestion-checkbox-${commentId}" name="suggestion-checkbox-${commentId}" class="suggestion-checkbox">
+            <label for="suggestion-checkbox-${commentId}" class="label-suggestion-checkbox" data-l10n-id="ep_comments_page.comments_template.include_suggestion">Include suggested change</label>
+        </p>
+        <div class="suggestion suggestion-create">
+            <span class="from-label" data-l10n-id="ep_comments_page.comments_template.suggest_change_from"  data-l10n-args='{"changeFrom": "${changeFrom}"}'>Suggest Change From</span>
+            <span class="hidden from-value">${changeFrom}</span>
+            <textarea class="to-value">${changeTo}</textarea>
+        </div>
+    </div>
+    {{/if}}
     <p>
       <button class="btn btn-primary comment-edit-submit" data-l10n-id="ep_comments_page.comments_template.edit_comment.save">Save</button>
       <button class="btn btn-default comment-edit-cancel" data-l10n-id="ep_comments_page.comments_template.edit_comment.cancel">Cancel</button>