ep_comments_page 11.1.16 → 11.1.17

package/static/css/comment.css

@@ -7,6 +7,27 @@
   color: orange !important;
 }
 
+/* High-contrast / forced-colors mode (e.g. Windows High Contrast Mode), #217.
+   In forced-colors mode the UA discards the fixed yellow/dark fill above, so
+   commented text becomes indistinguishable from the rest of the document, and
+   the orange open-state colour is unreadable against the highlight. Opt back
+   into author colours with the system "marked text" pair — the semantic
+   colours browsers reserve for highlighted text — so the highlight stays
+   visible and legible whatever the active high-contrast palette is, and mark
+   the open comment with an outline (which forced-colors honours) instead of a
+   colour that cannot guarantee contrast. */
+@media (forced-colors: active) {
+  #innerdocbody .ace-line .comment {
+    background-color: Mark;
+    color: MarkText;
+    forced-color-adjust: none;
+  }
+  #innerdocbody .ace-line .comment[data-open="true"] {
+    color: MarkText !important;
+    outline: 2px solid CanvasText;
+  }
+}
+
 
 /* Comment right side container */
 #comments {
@@ -26,6 +47,10 @@
 .sidebar-comment {
   position: absolute;
   width: 100%;
+  box-sizing: border-box;
+  /* Reserve room for the author-colour accent (#6) so commented boxes with and
+     without a known author colour stay aligned; the colour is set inline. */
+  border-left: 3px solid transparent;
 }
 
 /* WITH ICONS */
@@ -61,6 +86,50 @@ input.error, textarea.error {
   display: inline;
 }
 
+/* #241: previous/next comment navigation arrows in the comment header. */
+.comment-nav-wrapper {
+  float: right;
+  margin-left: 6px;
+}
+.comment-nav-prev,
+.comment-nav-next {
+  /* A fixed, comfortably-clickable icon box. The localized label html10n writes
+     into the element is clipped/invisible (kept as the accessible name via
+     aria-label); the ‹ / › glyph is painted by ::before over the whole box. */
+  position: relative;
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  overflow: hidden;
+  white-space: nowrap;
+  color: transparent;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.comment-nav-prev:before,
+.comment-nav-next:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  line-height: 1.5em;
+  text-align: center;
+  color: #666;
+  font-size: 18px;
+  font-weight: bold;
+}
+.comment-nav-prev:hover:before,
+.comment-nav-next:hover:before {
+  color: #000;
+}
+.comment-nav-prev:before {
+  content: "\2039"; /* ‹ */
+}
+.comment-nav-next:before {
+  content: "\203A"; /* › */
+}
+
 /* COMMENT COMPACTED (Visible on right side) */
 .sidebar-comment:not(.full-display) .full-display-content {
   display: none;
@@ -118,8 +187,13 @@ input.error, textarea.error {
 }
 .suggestion-display .from-value,
 .suggestion-display .to-value {
-  opacity: .8;
   font-style: italic;
+  /* #380: the colibris skin renders these values in its green --primary-color
+     (#64d29b), which is ~1.9:1 against the light comment background — well below
+     WCAG AA. Use the skin's regular text colour instead (readable everywhere,
+     still skin-overridable via the same token) with a dark fallback. !important
+     beats the core skin's non-important rule regardless of load order. */
+  color: var(--text-color, #2b2b2b) !important;
 }
 .suggestion-display .from-value:after, .suggestion-display .from-value:before,
 .suggestion-display .to-value:after, .suggestion-display .to-value:before {
@@ -133,7 +207,6 @@ input.error, textarea.error {
 }
 .suggestion-create .from-value {
   display: block;
-  opacity: .8;
   font-style: italic;
   margin: 5px 0;
 }
@@ -199,6 +272,16 @@ input.error, textarea.error {
 .comment-modal {
   bottom: auto !important;
   right: auto !important;
+  /* Single source of truth for the viewport safe-margin so the CSS width cap
+     and the JS left/top clamp can't drift apart (#192). commentBoxes.js reads
+     this custom property back via getComputedStyle. */
+  --comment-modal-margin: 10px;
+  /* Never let the popup grow wider than the viewport, otherwise it spills off
+     the right edge on narrow / mobile screens regardless of its left position
+     (#192). Pairs with the left/right clamp in commentBoxes.js. */
+  max-width: calc(100% - (2 * var(--comment-modal-margin)));
+  box-sizing: border-box;
+  overflow-wrap: break-word;
 }
 .comment-modal-comment {
   padding: 0;
@@ -218,6 +301,109 @@ input.error, textarea.error {
   margin-top: 0 !important;
 }
 
+/* READ-ONLY: hide write-only comment actions (edit / delete) on read-only
+   pads (#112). The comment sidebar and modal live in the ace_outer iframe,
+   which does not receive core's `readonly` body class, so the plugin tags the
+   outer body with `comments-readonly` itself (see static/js/index.js). The
+   server already rejects edits/deletes from read-only sessions; this removes
+   the now-dead controls from the UI. */
+.comments-readonly .comment-actions-wrapper {
+  display: none !important;
+}
+
+/* #95: floating "add comment" button that follows the selection. Positioned
+   inline (in #editorcontainerbox space) by the plugin and clamped on-screen, so
+   it works the same on desktop and narrow/mobile viewports. It is shown
+   translucent so it doesn't obscure the selection, and becomes fully opaque on
+   hover/focus (#95). */
+.floating-add-comment {
+  position: absolute;
+  display: none;
+  z-index: 100;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  text-align: center;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+  cursor: pointer;
+  color: #444;
+  user-select: none;
+  opacity: .55;
+  transition: opacity .15s ease;
+}
+.floating-add-comment.visible {
+  display: block;
+}
+.floating-add-comment:hover,
+.floating-add-comment:focus {
+  background: #f3f3f3;
+  opacity: 1;
+}
+
+/* #12/#5: all-comments overview panel (opened from the "Show all comments"
+   checkbox in the Settings pane). */
+#comments-overview {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 280px;
+  max-width: calc(100% - 12px);
+  max-height: 70%;
+  display: none;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
+  z-index: 101;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+#comments-overview.visible {
+  display: flex;
+}
+.comments-overview-header {
+  font-weight: bold;
+  padding: 8px 10px;
+  border-bottom: 1px solid #eee;
+  flex: 0 0 auto;
+}
+.comments-overview-list {
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+.comments-overview-empty {
+  padding: 10px;
+  color: #888;
+}
+.comments-overview-row {
+  padding: 8px 10px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+}
+.comments-overview-row:hover {
+  background: #f5f5f5;
+}
+.comments-overview-row.resolved {
+  opacity: .6;
+  text-decoration: line-through;
+}
+.comments-overview-author {
+  font-weight: bold;
+  margin-right: 6px;
+}
+
+/* #96: visually mark the toolbar "Add comment" button as unavailable until
+   text is selected (commenting needs a selection). It is also not activatable
+   while disabled (see the click guard in static/js/index.js). */
+.addComment.comment-btn-disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+
 /* OTHER */
 .hidden {
   display: none;

package/static/js/commentBoxes.js

@@ -52,8 +52,14 @@ const highlightComment = (commentId, e, editorComment) => {
     // make a full copy of the html, including listeners
     const commentElmCloned = commentElm.clone(true, true);
 
-    // before of appending clear the css (like top positionning)
+    // Clear only the sidebar positioning so the clone sits correctly in the
+    // modal — but preserve the author-colour accent (#6), which insertComment()
+    // sets as an inline border-left and would otherwise be wiped by clearing
+    // the whole style attribute (#436). Read the inline value off the original
+    // element (the clone may be detached, so computed styles aren't available).
+    const authorBorder = commentElm[0] && commentElm[0].style.borderLeft;
     commentElmCloned.attr('style', '');
+    if (authorBorder) commentElmCloned.css('border-left', authorBorder);
     // fix checkbox, because as we are duplicating the sidebar-comment, we lose unique input names
     commentElmCloned.find('.label-suggestion-checkbox').click(function () {
       $(this).siblings('input[type="checkbox"]').click();
@@ -65,26 +71,41 @@ const highlightComment = (commentId, e, editorComment) => {
     // get modal position
     const containerWidth = getPadOuter().find('#outerdocbody').outerWidth(true);
     const modalWitdh = getPadOuter().find('.comment-modal').outerWidth(true);
-    let targetLeft = e.clientX;
-    let targetTop = $(e.target).offset().top;
+    // Be tolerant of being called without a (complete) event — e.g. programmatic
+    // navigation (#241). Fall back to the anchor element's position so we never
+    // dereference a missing event (clientX/target).
+    const $anchor = (e && e.target) ? $(e.target) : (editorComment || commentElm);
+    const anchorOffset = $anchor.offset() || {left: 0, top: 0};
+    let targetLeft = (e && typeof e.clientX === 'number') ? e.clientX : anchorOffset.left;
+    let targetTop = anchorOffset.top;
     if (editorComment) {
       targetLeft += padInner.offset().left;
       targetTop += parseInt(padInner.css('padding-top').split('px')[0]);
       targetTop += parseInt(padOuter.find('#outerdocbody').css('padding-top').split('px')[0]);
     } else {
       // mean we are clicking from a comment Icon
-      targetLeft = $(e.target).offset().left - 20;
+      targetLeft = anchorOffset.left - 20;
     }
 
-    // if positioning modal on target left will make part of the modal to be
-    // out of screen, we place it closer to the middle of the screen
-    if (targetLeft + modalWitdh > containerWidth) {
-      targetLeft = containerWidth - modalWitdh - 25;
-    }
+    // Clamp horizontally so the modal never spills off either edge. The old
+    // code only guarded the right edge, which left the popup half off-screen
+    // (or pushed it past the left edge from the icon's `offset - 20`) on
+    // narrow / mobile viewports (#192). max() keeps the left margin valid even
+    // when the modal is wider than the container.
+    // Read the safe-margin from the CSS custom property so JS and CSS stay in
+    // sync (single source of truth on .comment-modal); fall back to 10px.
+    const $modal = getPadOuter().find('.comment-modal');
+    const marginProp = $modal.length
+      ? parseFloat(getComputedStyle($modal[0]).getPropertyValue('--comment-modal-margin'))
+      : NaN;
+    const margin = Number.isFinite(marginProp) ? marginProp : 10;
+    const maxLeft = Math.max(margin, containerWidth - modalWitdh - margin);
+    targetLeft = Math.min(Math.max(targetLeft, margin), maxLeft);
     const editorCommentHeight = editorComment ? editorComment.outerHeight(true) : 30;
+    targetTop = Math.max(margin, targetTop + editorCommentHeight);
     getPadOuter().find('.comment-modal').addClass('popup-show').css({
       left: `${targetLeft}px`,
-      top: `${targetTop + editorCommentHeight}px`,
+      top: `${targetTop}px`,
     });
   }
 };

package/static/js/copyPasteEvents.js

@@ -1,6 +1,5 @@
 'use strict';
 
-const _ = require('underscore');
 const randomString = require('ep_etherpad-lite/static/js/pad_utils').randomString;
 const shared = require('./shared');
 
@@ -49,15 +48,15 @@ exports.addTextOnClipboard = (e, ace, padInner, removeSelection, comments, repli
 
 const getReplyData = (replies, commentIds) => {
   let replyData = {};
-  _.each(commentIds, (commentId) => {
-    replyData = _.extend(getRepliesFromCommentId(replies, commentId), replyData);
+  commentIds.forEach((commentId) => {
+    replyData = Object.assign(getRepliesFromCommentId(replies, commentId), replyData);
   });
   return replyData;
 };
 
 const getRepliesFromCommentId = (replies, commentId) => {
   const repliesFromCommentID = {};
-  _.each(replies, (reply, replyId) => {
+  Object.entries(replies || {}).forEach(([replyId, reply]) => {
     if (reply.commentId === commentId) {
       repliesFromCommentID[replyId] = reply;
     }
@@ -67,7 +66,7 @@ const getRepliesFromCommentId = (replies, commentId) => {
 
 const buildCommentIdToFakeIdMap = (commentsData) => {
   const commentIdToFakeId = {};
-  _.each(commentsData, (comment, fakeCommentId) => {
+  Object.entries(commentsData).forEach(([fakeCommentId, comment]) => {
     const commentId = comment.data.originalCommentId;
     commentIdToFakeId[commentId] = fakeCommentId;
   });
@@ -76,7 +75,7 @@ const buildCommentIdToFakeIdMap = (commentsData) => {
 
 const replaceCommentIdsWithFakeIds = (commentsData, html) => {
   const commentIdToFakeId = buildCommentIdToFakeIdMap(commentsData);
-  _.each(commentIdToFakeId, (fakeCommentId, commentId) => {
+  Object.entries(commentIdToFakeId).forEach(([commentId, fakeCommentId]) => {
     $(html).find(`.${commentId}`).removeClass(commentId).addClass(fakeCommentId);
   });
   const htmlWithFakeCommentIds = getHtml(html);
@@ -86,7 +85,7 @@ const replaceCommentIdsWithFakeIds = (commentsData, html) => {
 const buildCommentsData = (html, comments) => {
   const commentsData = {};
   const originalCommentIds = getCommentIds(html);
-  _.each(originalCommentIds, (originalCommentId) => {
+  originalCommentIds.forEach((originalCommentId) => {
     const fakeCommentId = generateFakeCommentId();
     const comment = comments[originalCommentId];
     comment.data.originalCommentId = originalCommentId;
@@ -101,9 +100,9 @@ const generateFakeCommentId = () => {
 };
 
 const getCommentIds = (html) => {
-  const allSpans = $(html).find('span');
+  const allSpans = $(html).find('span').toArray();
   const commentIds = [];
-  _.each(allSpans, (span) => {
+  allSpans.forEach((span) => {
     const cls = $(span).attr('class');
     const classCommentId = /(?:^| )(c-[A-Za-z0-9]*)/.exec(cls);
     const commentId = (classCommentId) ? classCommentId[1] : false;
@@ -217,7 +216,7 @@ const saveComments = (comments) => {
   const mapOriginalCommentsId = pad.plugins.ep_comments_page.mapOriginalCommentsId;
   const mapFakeComments = pad.plugins.ep_comments_page.mapFakeComments;
 
-  _.each(comments, (comment, fakeCommentId) => {
+  Object.entries(comments).forEach(([fakeCommentId, comment]) => {
     const newCommentId = shared.generateCommentId();
     mapFakeComments[fakeCommentId] = newCommentId;
     const originalCommentId = comment.data.originalCommentId;
@@ -231,7 +230,7 @@ const saveReplies = (replies) => {
   const repliesToSave = {};
   const padId = clientVars.padId;
   const mapOriginalCommentsId = pad.plugins.ep_comments_page.mapOriginalCommentsId;
-  _.each(replies, (reply, replyId) => {
+  Object.entries(replies).forEach(([replyId, reply]) => {
     const originalCommentId = reply.commentId;
     // as the comment copied has got a new commentId, we set this id in the reply as well
     reply.commentId = mapOriginalCommentsId[originalCommentId];
@@ -258,7 +257,7 @@ const htmlDecode = (input) => {
 exports.getCommentIdOnFirstPositionSelected = function () {
   const attributeManager = this.documentAttributeManager;
   const rep = this.rep;
-  const commentId = _.object(
+  const commentId = Object.fromEntries(
       attributeManager.getAttributesOnPosition(rep.selStart[0], rep.selStart[1])).comment;
   return commentId;
 };
@@ -311,7 +310,7 @@ const hasCommentOnLine = (lineNumber, firstColumn, lastColumn, attributeManager)
   let foundCommentOnLine = false;
   for (let column = firstColumn; column <= lastColumn && !foundCommentOnLine; column++) {
     const commentId =
-      _.object(attributeManager.getAttributesOnPosition(lineNumber, column)).comment;
+      Object.fromEntries(attributeManager.getAttributesOnPosition(lineNumber, column)).comment;
     if (commentId !== undefined) {
       foundCommentOnLine = true;
     }