ep_comments_page 0.1.98 → 1.0.2

package/index.js

@@ -4,7 +4,7 @@ const AttributePool = require('ep_etherpad-lite/static/js/AttributePool');
 const Changeset = require('ep_etherpad-lite/static/js/Changeset');
 const eejs = require('ep_etherpad-lite/node/eejs/');
 const settings = require('ep_etherpad-lite/node/utils/Settings');
-const formidable = require('formidable');
+const {Formidable} = require('formidable');
 const commentManager = require('./commentManager');
 const apiUtils = require('./apiUtils');
 const _ = require('underscore');
@@ -226,10 +226,7 @@ exports.expressCreateServer = (hookName, args, callback) => {
 
   args.app.post('/p/:pad/:rev?/comments', async (req, res) => {
     const fields = await new Promise((resolve, reject) => {
-      (new formidable.IncomingForm()).parse(req, (err, fields) => {
-        if (err != null) return reject(err);
-        resolve(fields);
-      });
+      new Formidable().parse(req, (err, fields) => err ? reject(err) : resolve(fields));
     });
 
     // check the api key
@@ -289,10 +286,7 @@ exports.expressCreateServer = (hookName, args, callback) => {
 
   args.app.post('/p/:pad/:rev?/commentReplies', async (req, res) => {
     const fields = await new Promise((resolve, reject) => {
-      (new formidable.IncomingForm()).parse(req, (err, fields) => {
-        if (err != null) return reject(err);
-        resolve(fields);
-      });
+      new Formidable().parse(req, (err, fields) => err ? reject(err) : resolve(fields));
     });
 
     // check the api key

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "Adds comments on sidebar and link it to the text.  For no-skin use ep_page_view.",
   "name": "ep_comments_page",
-  "version": "0.1.98",
+  "version": "1.0.2",
   "author": {
     "name": "Nicolas Lescop",
     "email": "limplementeur@gmail.com"
@@ -23,14 +23,14 @@
   ],
   "dependencies": {
     "cheerio": "^0.22.0",
-    "formidable": "^1.2.2",
-    "underscore": "^1.13.1"
+    "formidable": "^2.0.1",
+    "underscore": "^1.13.2"
   },
   "devDependencies": {
-    "eslint": "^8.10.0",
-    "eslint-config-etherpad": "^3.0.4",
+    "eslint": "^8.11.0",
+    "eslint-config-etherpad": "^3.0.9",
     "socket.io-client": "^2.3.0",
-    "superagent": "^6.1.0",
+    "superagent": "^7.1.1",
     "typescript": "^4.6.2"
   },
   "scripts": {

package/static/js/index.js

@@ -60,7 +60,7 @@ const EpComments = function (context) {
   this.mapFakeComments = [];
   this.mapOriginalCommentsId = [];
   this.shouldCollectComment = false;
-  this.init();
+  this.initDone = this.init();
   this.preCommentMarker = preCommentMark.init(this.ace);
 };
 
@@ -590,6 +590,10 @@ EpComments.prototype.insertComment = function (commentId, comment, index) {
   comment.commentId = commentId;
   comment.reply = true;
   content = $('#commentsTemplate').tmpl(comment);
+  content.find('.from-label')[0].dataset.l10nArgs = JSON.stringify({
+    changeFrom: comment.changeFrom,
+    changeTo: comment.changeTo,
+  });
   if (comment.author !== clientVars.userId) {
     $(content).find('.comment-actions-wrapper').addClass('hidden');
   }
@@ -897,12 +901,6 @@ EpComments.prototype.displayNewCommentForm = function () {
   // Write the text to the changeFrom form
   $('#newComment').find('.from-value').text(selectedText);
 
-  // Display form
-  setTimeout(() => {
-    const position = getXYOffsetOfRep(rep);
-    newComment.showNewCommentPopup(position);
-  });
-
   // Check if the first element selected is visible in the viewport
   const $firstSelectedElement = this.getFirstElementSelected();
   const firstSelectedElementInViewport = this.isElementInViewport($firstSelectedElement);
@@ -911,8 +909,9 @@ EpComments.prototype.displayNewCommentForm = function () {
     this.scrollViewportIfSelectedTextIsNotVisible($firstSelectedElement);
   }
 
-  // Adjust focus on the form
-  $('#newComment').find('.comment-content').focus();
+  // Display form
+  const position = getXYOffsetOfRep(rep);
+  newComment.showNewCommentPopup(position);
 };
 
 EpComments.prototype.scrollViewportIfSelectedTextIsNotVisible = function ($firstSelectedElement) {
@@ -1226,9 +1225,10 @@ EpComments.prototype.pushComment = function (eventType, callback) {
 const hooks = {
 
   // Init pad comments
-  postAceInit: (hookName, context, cb) => {
+  postAceInit: async (hookName, context) => {
     if (!pad.plugins) pad.plugins = {};
     const Comments = new EpComments(context);
+    await Comments.initDone;
     pad.plugins.ep_comments_page = Comments;
 
     if (!$('#editorcontainerbox').hasClass('flex-layout')) {
@@ -1240,7 +1240,6 @@ const hooks = {
         class_name: 'error',
       });
     }
-    return cb();
   },
 
   postToolbarInit: (hookName, args, cb) => {

package/static/js/newComment.js

@@ -2,6 +2,8 @@
 
 const commentL10n = require('ep_comments_page/static/js/commentL10n');
 
+let $newComment = $();
+
 // Create a comment object with data filled on the given form
 const buildCommentFrom = (form) => {
   const text = form.find('.comment-content').val();
@@ -26,15 +28,16 @@ const cancelNewComment = () => {
 // Callback for new comment Submit
 const submitNewComment = (callback) => {
   const index = 0;
-  const form = $('#newComment');
-  const comment = buildCommentFrom(form);
+  const comment = buildCommentFrom($newComment);
   if (comment.text.length > 0 || comment.changeTo && comment.changeTo.length > 0) {
-    form.find('.comment-content, .to-value').removeClass('error');
+    $newComment.find('.comment-content, .to-value').removeClass('error');
     hideNewCommentPopup();
     callback(comment, index);
   } else {
-    if (comment.text.length === 0) form.find('.comment-content').addClass('error');
-    if (comment.changeTo && comment.changeTo.length === 0) form.find('.to-value').addClass('error');
+    if (comment.text.length === 0) $newComment.find('.comment-content').addClass('error');
+    if (comment.changeTo && comment.changeTo.length === 0) {
+      $newComment.find('.to-value').addClass('error');
+    }
   }
   return false;
 };
@@ -42,36 +45,35 @@ const submitNewComment = (callback) => {
 /* ***** Public methods: ***** */
 
 const localizenewCommentPopup = () => {
-  const newCommentPopup = $('#newComment');
-  if (newCommentPopup.length !== 0) commentL10n.localize(newCommentPopup);
+  if ($newComment.length !== 0) commentL10n.localize($newComment);
 };
 
 // Insert new Comment Form
 const insertNewCommentPopupIfDontExist = (comment, callback) => {
-  $('#newComment').remove();
+  $newComment.remove();
 
   comment.commentId = '';
-  const newCommentPopup = $('#newCommentTemplate').tmpl(comment);
-  newCommentPopup.appendTo($('#editorcontainerbox'));
+  $newComment = $('#newCommentTemplate').tmpl(comment);
+  $newComment.appendTo($('#editorcontainerbox'));
 
   localizenewCommentPopup();
 
   // Listen for include suggested change toggle
-  $('#newComment').find('.suggestion-checkbox').change(function () {
-    $('#newComment').find('.suggestion').toggle($(this).is(':checked'));
+  $newComment.find('.suggestion-checkbox').change(function () {
+    $newComment.find('.suggestion').toggle($(this).is(':checked'));
   });
 
   // Cancel btn
-  newCommentPopup.find('#comment-reset').on('click', () => {
+  $newComment.find('#comment-reset').on('click', () => {
     cancelNewComment();
   });
   // Create btn
-  $('#newComment').on('submit', (e) => {
+  $newComment.on('submit', (e) => {
     e.preventDefault();
     return submitNewComment(callback);
   });
 
-  return newCommentPopup;
+  return $newComment;
 };
 
 const showNewCommentPopup = (position) => {
@@ -82,27 +84,28 @@ const showNewCommentPopup = (position) => {
     left = $('.toolbar .addComment').offset().left;
   }
   const top = position[1];
-  $('#newComment').css('left', left);
+  $newComment.css('left', left);
   if (left === position[0]) {
-    $('#newComment').css('top', top);
+    $newComment.css('top', top);
   }
   // Reset form to make sure it is all clear
-  $('#newComment').find('.suggestion-checkbox').prop('checked', false).trigger('change');
-  $('#newComment').find('textarea').val('');
-  $('#newComment').find('.comment-content, .to-value').removeClass('error');
+  $newComment.find('.suggestion-checkbox').prop('checked', false).trigger('change');
+  $newComment.find('textarea').val('');
+  $newComment.find('.comment-content, .to-value').removeClass('error');
 
   // Show popup
-  $('#newComment').addClass('popup-show');
+  $newComment.addClass('popup-show');
+  $newComment.find('.comment-content').focus();
 
   // mark selected text, so it is clear to user which text range the comment is being applied to
   pad.plugins.ep_comments_page.preCommentMarker.markSelectedText();
 };
 
 const hideNewCommentPopup = () => {
-  $('#newComment').removeClass('popup-show');
+  $newComment.removeClass('popup-show');
 
   // force focus to be lost, so virtual keyboard is hidden on mobile devices
-  $('#newComment').find(':focus').blur();
+  $newComment.find(':focus').blur();
 
   // unmark selected text, as now there is no text being commented
   pad.plugins.ep_comments_page.preCommentMarker.unmarkSelectedText();

package/static/tests/frontend/specs/commentDelete.js

@@ -1,110 +1,87 @@
 'use strict';
 
-describe('ep_comments_page - Comment Delete', function () {
-  let helperFunctions;
-  const textOfComment = 'original comment';
-  const textOfReply = 'original reply';
-  const FIRST_LINE = 0;
+const utils = require('../utils');
 
-  // create pad with a comment and a reply
-  beforeEach(function (done) {
-    helperFunctions = commentDelete;
-    helperFunctions.createPad(this, () => {
-      helperFunctions.addComentAndReplyToLine(FIRST_LINE, textOfComment, textOfReply, done);
-    });
-  });
+let helperFunctions;
+const textOfComment = 'original comment';
+const textOfReply = 'original reply';
+const FIRST_LINE = 0;
 
-  context('when user presses the delete button on a comment', function () {
-    it('should delete comment', function (done) {
-      const outer$ = helper.padOuter$;
-      const inner$ = helper.padInner$;
-      outer$('.comment-delete').click();
-      helper.waitFor(() => inner$('.comment').length === 0).done(() => {
-        if (inner$('.comment').length !== 0) throw new Error('Error deleting comment');
-        done();
-      });
+// create pad with a comment and a reply
+beforeEach(async function () {
+  helperFunctions = commentDelete;
+  await helperFunctions.createPad(this);
+  await helperFunctions.addCommentAndReplyToLine(FIRST_LINE, textOfComment, textOfReply);
+});
+
+context('when user presses the delete button on a comment', function () {
+  it('should delete comment', function (done) {
+    const outer$ = helper.padOuter$;
+    const inner$ = helper.padInner$;
+    outer$('.comment-delete').click();
+    helper.waitFor(() => inner$('.comment').length === 0).done(() => {
+      if (inner$('.comment').length !== 0) throw new Error('Error deleting comment');
+      done();
     });
   });
+});
 
-  context('when user presses the delete button on other users comment', function () {
-    it('should not delete comment', async function () {
-      let outer$ = helper.padOuter$;
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      await new Promise((resolve) => helper.newPad(resolve, helperFunctions.padId));
-      await helper.waitForPromise(() => {
-        outer$ = helper.padOuter$;
-        return !!outer$ && outer$('.comment-delete').length;
-      });
-      outer$('.comment-delete').click();
-      await helper.waitForPromise(() => {
-        const chrome$ = helper.padChrome$;
-        return chrome$('#gritter-container').find('.error').length > 0;
-      });
-      const inner$ = helper.padInner$;
-      if (inner$('.comment').length === 0) throw new Error('Comment should not have been deleted');
+context('when user presses the delete button on other users comment', function () {
+  it('should not delete comment', async function () {
+    let outer$ = helper.padOuter$;
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await utils.aNewPad({id: helperFunctions.padId});
+    await helper.waitForPromise(() => {
+      outer$ = helper.padOuter$;
+      return !!outer$ && outer$('.comment-delete').length;
+    });
+    outer$('.comment-delete').click();
+    await helper.waitForPromise(() => {
+      const chrome$ = helper.padChrome$;
+      return chrome$('#gritter-container').find('.error').length > 0;
     });
+    const inner$ = helper.padInner$;
+    if (inner$('.comment').length === 0) throw new Error('Comment should not have been deleted');
   });
 });
 
 const commentDelete = {
   padId: undefined,
-  createPad(test, cb) {
-    const self = this;
-    this.padId = helper.newPad(() => {
-      self.enlargeScreen(() => {
-        self.createOrResetPadText(() => {
-          cb();
-        });
-      });
-    });
+  async createPad(test) {
     test.timeout(60000);
+    this.padId = await utils.aNewPad();
+    this.enlargeScreen();
+    await this.createOrResetPadText();
   },
-  createOrResetPadText(cb) {
-    this.cleanPad(() => {
+  async createOrResetPadText() {
+    await this.cleanPad();
+    const inner$ = helper.padInner$;
+    inner$('div').first().sendkeys('something\n anything');
+    await helper.waitForPromise(() => {
       const inner$ = helper.padInner$;
-      inner$('div').first().sendkeys('something\n anything');
-      helper.waitFor(() => {
-        const inner$ = helper.padInner$;
-        const lineLength = inner$('div').length;
-
-        return lineLength > 1;
-      }).done(cb);
+      const lineLength = inner$('div').length;
+      return lineLength > 1;
     });
   },
-  reloadPad(test, cb) {
-    test.timeout(20000);
-    const self = this;
-    const padId = this.padId;
-    // we do nothing for a second while we wait for content to be collected before reloading
-    // this may be hacky, but we need time for CC to run so... :?
-    setTimeout(() => {
-      helper.newPad(() => {
-        self.enlargeScreen(cb);
-      }, padId);
-    }, 1000);
-  },
-  cleanPad(callback) {
+  async cleanPad() {
     const inner$ = helper.padInner$;
     const $padContent = inner$('#innerdocbody');
     $padContent.html(' ');
 
     // wait for Etherpad to re-create first line
-    helper.waitFor(() => {
+    await helper.waitForPromise(() => {
       const lineNumber = inner$('div').length;
       return lineNumber === 1;
-    }, 20000).done(callback);
+    }, 20000);
   },
-  enlargeScreen(callback) {
+  enlargeScreen() {
     $('#iframe-container iframe').css('max-width', '3000px');
-    callback();
   },
-  addComentAndReplyToLine(line, textOfComment, textOfReply, callback) {
-    const self = this;
-    this.addCommentToLine(line, textOfComment, () => {
-      self.addCommentReplyToLine(line, textOfReply, callback);
-    });
+  async addCommentAndReplyToLine(line, textOfComment, textOfReply) {
+    await this.addCommentToLine(line, textOfComment);
+    await this.addCommentReplyToLine(line, textOfReply);
   },
-  addCommentToLine(line, textOfComment, callback) {
+  async addCommentToLine(line, textOfComment) {
     const chrome$ = helper.padChrome$;
     const $line = this.getLine(line);
     $line.sendkeys('{selectall}'); // needs to select content to add comment to
@@ -118,9 +95,9 @@ const commentDelete = {
     $submittButton.click();
 
     // wait until comment is created and comment id is set
-    this.createdCommentOnLine(line, callback);
+    await this.createdCommentOnLine(line);
   },
-  addCommentReplyToLine(line, textOfReply, callback) {
+  async addCommentReplyToLine(line, textOfReply) {
     const outer$ = helper.padOuter$;
     const commentId = this.getCommentIdOfLine(line);
     const existingReplies = outer$('.sidebar-comment-reply').length;
@@ -141,19 +118,18 @@ const commentDelete = {
     $submitReplyButton.click();
 
     // wait for the reply to be saved
-    helper.waitFor(() => {
+    await helper.waitForPromise(() => {
       const hasSavedReply = outer$('.sidebar-comment-reply').length === existingReplies + 1;
       return hasSavedReply;
-    }).done(callback);
+    });
   },
   getLine(lineNum) {
     const inner$ = helper.padInner$;
     const $line = inner$('div').slice(lineNum, lineNum + 1);
     return $line;
   },
-  createdCommentOnLine(line, cb) {
-    const self = this;
-    helper.waitFor(() => self.getCommentIdOfLine(line) != null).done(cb);
+  async createdCommentOnLine(line) {
+    await helper.waitForPromise(() => this.getCommentIdOfLine(line) != null);
   },
   getCommentIdOfLine(line) {
     const $line = this.getLine(line);
@@ -167,40 +143,4 @@ const commentDelete = {
   commentIconsEnabled() {
     return helper.padOuter$('#commentIcons').length > 0;
   },
-  clickEditCommentButton() {
-    const outer$ = helper.padOuter$;
-    const $editButton = outer$('.comment-edit').first();
-    $editButton.click();
-  },
-  clickEditCommentReplyButton() {
-    const outer$ = helper.padOuter$;
-    const $editButton = outer$('.comment-edit').last();
-    $editButton.click();
-  },
-  getEditForm() {
-    const outer$ = helper.padOuter$;
-    return outer$('.comment-edit-form');
-  },
-  checkIfOneFormEditWasAdded() {
-    expect(this.getEditForm().length).to.be(1);
-  },
-  checkIfOneFormEditWasRemoved() {
-    expect(this.getEditForm().length).to.be(0);
-  },
-  checkIfCommentFieldIsHidden(fieldClass) {
-    const outer$ = helper.padOuter$;
-    const $field = outer$(`.${fieldClass}`).first();
-    expect($field.is(':visible')).to.be(false);
-  },
-  pressCancel() {
-    const $cancelButton = this.getEditForm().find('.comment-edit-cancel');
-    $cancelButton.click();
-  },
-  pressSave() {
-    const $saveButton = this.getEditForm().find('.comment-edit-submit');
-    $saveButton.click();
-  },
-  writeCommentText(commentText) {
-    this.getEditForm().find('.comment-edit-text').text(commentText);
-  },
 };