ep_comments_page 11.0.22 → 11.0.24

package/locales/en.json

@@ -12,6 +12,7 @@
   "ep_comments_page.comments_template.accept_change.value" : "Accept Change",
   "ep_comments_page.comments_template.revert_change.value" : "Revert Change",
   "ep_comments_page.comments_template.suggested_change_from" : "Suggested change from \"{{changeFrom}}\" to \"{{changeTo}}\"",
+  "ep_comments_page.comments_template.suggested_change_from_label" : "Suggested change from",
   "ep_comments_page.comments_template.suggest_change_from" : "Suggest change from \"{{changeFrom}}\" to",
   "ep_comments_page.comments_template.to" : "To",
   "ep_comments_page.comments_template.include_suggestion" : "Include suggested change",

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": "11.0.22",
+  "version": "11.0.24",
   "author": {
     "name": "Nicolas Lescop",
     "email": "limplementeur@gmail.com"
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "eslint": "^8.57.1",
-    "eslint-config-etherpad": "^4.0.4",
+    "eslint-config-etherpad": "^4.0.5",
     "socket.io-client": "^4.8.3",
     "superagent": "^10.3.0",
     "typescript": "^6.0.2"

package/static/js/index.js

@@ -7,7 +7,6 @@
 
 
 const _ = require('underscore');
-const browser = require('ep_etherpad-lite/static/js/browser');
 const commentBoxes = require('ep_comments_page/static/js/commentBoxes');
 const commentIcons = require('ep_comments_page/static/js/commentIcons');
 const commentL10n = require('ep_comments_page/static/js/commentL10n');
@@ -113,6 +112,11 @@ EpComments.prototype.init = async function () {
   });
   $(window).resize(_.debounce(() => { this.setYofComments(); }, 100));
 
+  // Refresh the "N minutes ago" relative-time strings (#154). The original
+  // date is stored in the `datetime` attribute so we can recompute
+  // `fromNow()` without needing to track the cached string anywhere.
+  setInterval(() => this.refreshRelativeDates(), 60 * 1000);
+
   // On click comment icon toolbar
   $('.addComment').on('click', (e) => {
     e.preventDefault(); // stops focus from being lost
@@ -351,29 +355,21 @@ EpComments.prototype.init = async function () {
   // Check to see if we should show already..
   $('#options-comments').trigger('change');
 
-  // TODO - Implement to others browser like, Microsoft Edge, Opera, IE
-  // Override  copy, cut, paste events on Google chrome and Mozilla Firefox.
-  // When an user copies a comment and selects only the span, or part of it, Google chrome
-  // does not copy the classes only the styles, for example:
-  // <comment class='comment'><span>text to be copied</span></comment>
-  // As the comment classes are not only used for styling we have to add these classes when it
-  // pastes the content
-  // The same does not occur when the user selects more than the span, for example:
-  // text<comment class='comment'><span>to be copied</span></comment>
-  if (browser.chrome || browser.firefox) {
-    this.padInner.contents().on('copy', (e) => {
-      events.addTextOnClipboard(
-          e, this.ace, this.padInner, false, this.comments, this.commentReplies);
-    });
+  // Override copy, cut, paste events so that the comment class is preserved.
+  // Chrome doesn't copy classes when only the inner span of a comment is
+  // selected, so we re-apply them on paste.
+  this.padInner.contents().on('copy', (e) => {
+    events.addTextOnClipboard(
+        e, this.ace, this.padInner, false, this.comments, this.commentReplies);
+  });
 
-    this.padInner.contents().on('cut', (e) => {
-      events.addTextOnClipboard(e, this.ace, this.padInner, true);
-    });
+  this.padInner.contents().on('cut', (e) => {
+    events.addTextOnClipboard(e, this.ace, this.padInner, true);
+  });
 
-    this.padInner.contents().on('paste', (e) => {
-      events.saveCommentsAndReplies(e);
-    });
-  }
+  this.padInner.contents().on('paste', (e) => {
+    events.saveCommentsAndReplies(e);
+  });
 };
 
 EpComments.prototype.findCommentText = function ($commentBox) {
@@ -485,6 +481,12 @@ EpComments.prototype.collectComments = function (callback) {
     });
 
     this.padInner.contents().on('click', '.comment', function (e) {
+      // When comments are displayed as gutter icons, the user opens the
+      // comment by clicking the icon — the inline `.comment` span should
+      // behave like ordinary prose, so links inside a comment remain
+      // clickable. Previously the click handler popped up a modal
+      // intercepting the link click (#90).
+      if (clientVars.displayCommentAsIcon) return;
       const commentId = self.commentIdOf(e);
       commentBoxes.highlightComment(commentId, e, $(this));
     });
@@ -694,6 +696,19 @@ EpComments.prototype.allCommentsOnCorrectYPosition = function () {
   return allCommentsAreCorrect;
 };
 
+// Recompute "N minutes ago" style text on every `.comment-created-at`
+// element, using the ISO timestamp stored in the element's `datetime`
+// attribute as the source of truth (#154).
+EpComments.prototype.refreshRelativeDates = function () {
+  if (this.container == null) return;
+  this.container.find('.comment-created-at[datetime]').each(function () {
+    const iso = $(this).attr('datetime');
+    if (!iso) return;
+    const next = moment(iso).fromNow();
+    if ($(this).text() !== next) $(this).text(next);
+  });
+};
+
 EpComments.prototype.localizeExistingComments = function () {
   const self = this;
   const padComments = this.padInner.contents().find('.comment');

package/static/tests/backend/specs/l10n.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const assert = require('assert').strict;
+const fs = require('fs');
+const path = require('path');
+
+const pluginRoot = path.resolve(__dirname, '..', '..', '..', '..');
+const enPath = path.join(pluginRoot, 'locales', 'en.json');
+const commentsTemplatePath = path.join(pluginRoot, 'templates', 'comments.html');
+
+const readJSON = (p) => JSON.parse(fs.readFileSync(p, 'utf8'));
+
+describe(__filename, function () {
+  let en;
+  let template;
+
+  before(function () {
+    en = readJSON(enPath);
+    template = fs.readFileSync(commentsTemplatePath, 'utf8');
+  });
+
+  it('every data-l10n-id referenced in comments.html exists in en.json', function () {
+    const ids = new Set();
+    const re = /data-l10n-id="([^"]+)"/g;
+    let m;
+    while ((m = re.exec(template)) !== null) ids.add(m[1]);
+    assert(ids.size > 0, 'expected at least one data-l10n-id in comments.html');
+    for (const id of ids) {
+      // Some data-l10n-id values are computed via jquery template syntax like
+      // `{{if reply}}...{{/if}}`. Enumerate the possible keys in that case.
+      if (id.includes('{{if reply}}')) {
+        const a = id.replace('{{if reply}}reply{{else}}comment{{/if}}', 'reply');
+        const b = id.replace('{{if reply}}reply{{else}}comment{{/if}}', 'comment');
+        assert(Object.prototype.hasOwnProperty.call(en, a), `missing ${a}`);
+        assert(Object.prototype.hasOwnProperty.call(en, b), `missing ${b}`);
+        continue;
+      }
+      assert(Object.prototype.hasOwnProperty.call(en, id),
+          `missing translation for data-l10n-id "${id}"`);
+    }
+  });
+
+  it('suggestion label does not use a key with unresolved placeholders (regression for #273)',
+      function () {
+        // The display-suggestion template previously used
+        // `suggested_change_from` whose English value contains {{changeFrom}} /
+        // {{changeTo}}. No data-l10n-args is provided on the span, so the
+        // placeholders were rendered as literal text. The replacement label
+        // key must not require any arguments.
+        const labelKey = 'ep_comments_page.comments_template.suggested_change_from_label';
+        assert(Object.prototype.hasOwnProperty.call(en, labelKey),
+            `expected ${labelKey} in en.json`);
+        assert(!/\{\{/.test(en[labelKey]),
+            `${labelKey} must not contain {{placeholders}}; got: ${en[labelKey]}`);
+
+        // The template references the new label key.
+        assert(template.includes(`data-l10n-id="${labelKey}"`),
+            `comments.html should reference ${labelKey} for the suggestion display label`);
+      });
+});

package/static/tests/backend/specs/relative_time.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const assert = require('assert').strict;
+const fs = require('fs');
+const path = require('path');
+
+const pluginRoot = path.resolve(__dirname, '..', '..', '..', '..');
+const indexPath = path.join(pluginRoot, 'static', 'js', 'index.js');
+
+describe(__filename, function () {
+  let src;
+  before(function () {
+    src = fs.readFileSync(indexPath, 'utf8');
+  });
+
+  it('registers a setInterval that calls refreshRelativeDates (#154)', function () {
+    // Any cadence works, but the interval must actually be scheduled so the
+    // relative-time strings update without a page reload. A one-line regex
+    // can't reliably parse nested parens (`setInterval(() => ...)`), so
+    // just require the two identifiers to live in the same statement.
+    const stmt = src.match(/setInterval[\s\S]*?refreshRelativeDates[\s\S]*?\);/);
+    assert(stmt, 'init should schedule setInterval(() => this.refreshRelativeDates(), ...)');
+  });
+
+  it('refreshRelativeDates recomputes text from the datetime attribute (#154)',
+      function () {
+        const match = src.match(
+            /EpComments\.prototype\.refreshRelativeDates\s*=\s*function[\s\S]*?\n\};/);
+        assert(match, 'refreshRelativeDates should be defined on EpComments.prototype');
+        const body = match[0];
+        assert(/comment-created-at\[datetime\]/.test(body),
+            'refreshRelativeDates must target elements with a datetime attribute so the ISO ' +
+            'timestamp can be used as the source of truth');
+        assert(/moment\([^)]+\)\.fromNow\(\)/.test(body),
+            'refreshRelativeDates should recompute the relative time via moment(iso).fromNow()');
+      });
+});

package/templates/comments.html

@@ -97,7 +97,7 @@
     {{if changeTo}}
     <form class="comment-changeTo-form suggestion-display">
         <div>
-            <span class="from-label" data-l10n-id="ep_comments_page.comments_template.suggested_change_from">Suggested Change From</span>
+            <span class="from-label" data-l10n-id="ep_comments_page.comments_template.suggested_change_from_label">Suggested change from</span>
             <span class="hidden from-value">${changeFrom}</span>
             <span class="hidden to-value">${changeTo}</span>
         </div>