feat: floating add-comment button anchored to the selection (#95) (#438)

* feat: floating add-comment button anchored to the selection (#95)

Add a small floating 'add comment' button that appears next to the
selected text and opens the new-comment form, so users don't have to go
to the toolbar.

It's positioned inline (in #editorcontainerbox space, reusing the
new-comment popup's getXYOffsetOfRep) and clamped on-screen with the same
idea as the #192 mobile fix, so it behaves the same on desktop and narrow
/ mobile viewports — it's anchored to the text rather than the sidebar
(which is hidden below 900px). It tracks the selection via aceEditEvent,
hides when nothing is selected, on read-only pads, and while the
new-comment form is already open. mousedown.preventDefault preserves the
selection so the form still sees it.

Pure plugin change — works on the latest release (2.7.3) and develop
without a core update. Adds a Playwright test covering appear-on-select,
on-screen clamp, open-the-form, and hide-after.

Closes #95

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: make floating comment button admin-disableable (#95)

Gate the floating add-comment button behind
ep_comments_page.floatingCommentButton (default true) so admins can turn
it off without code changes. Documented in the README.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: JohnMcLear

README.md

@@ -80,6 +80,12 @@ by default; disable it with:
 ```
 "ep_comments_page": {
   "showAuthorColor": false
+### Floating comment button
+When text is selected, a small floating button appears next to it for quickly
+adding a comment. This is on by default; disable it with:
+```
+"ep_comments_page": {
+  "floatingCommentButton": false
 },
 ```
 

index.js

@@ -278,6 +278,9 @@ exports.clientVars = async (hook, context) => {
     settings.ep_comments_page ? settings.ep_comments_page.displayCommentAsIcon : false;
   const highlightSelectedText =
     settings.ep_comments_page ? settings.ep_comments_page.highlightSelectedText : false;
+  // #95: the floating add-comment button is on unless an admin disables it.
+  const floatingCommentButton = !(settings.ep_comments_page &&
+    settings.ep_comments_page.floatingCommentButton === false);
   // #6: author-colour accent is on unless an admin disables it.
   const showAuthorColor = !(settings.ep_comments_page &&
     settings.ep_comments_page.showAuthorColor === false);
@@ -288,7 +291,8 @@ exports.clientVars = async (hook, context) => {
   // helper can read padWideSupported/initialPadEnabled/etc.
   const helperVars = await commentsToggle.clientVars(hook, context);
   return Object.assign(
-      {displayCommentAsIcon, highlightSelectedText, showAuthorColor, allowReadonlyComments},
+      {displayCommentAsIcon, highlightSelectedText, floatingCommentButton, showAuthorColor,
+        allowReadonlyComments},
       helperVars);
 };
 

static/css/comment.css

@@ -311,6 +311,37 @@ input.error, textarea.error {
   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 {

static/js/index.js

@@ -1043,6 +1043,78 @@ const getXYOffsetOfRep = (rep) => {
   }
 };
 
+// #95: floating "add comment" button anchored to the current selection.
+// Lazily build the element once, in the same container the new-comment popup
+// uses (#editorcontainerbox), so it shares the popup's coordinate space.
+EpComments.prototype.ensureFloatingAddCommentButton = function () {
+  if (this.$floatingAddComment && this.$floatingAddComment.length) {
+    return this.$floatingAddComment;
+  }
+  const self = this;
+  const $btn = $('<div>')
+      .addClass('floating-add-comment')
+      .attr('role', 'button')
+      .attr('tabindex', '0')
+      // Localize via data-l10n-id (sets the title/accessible name through
+      // html10n) rather than a hardcoded aria-label, so it translates and
+      // re-localizes on language change (#95).
+      .attr('data-l10n-id', 'ep_comments_page.add_comment.title')
+      .attr('title',
+          (html10n.translations && html10n.translations['ep_comments_page.add_comment.title']) ||
+            'Add comment')
+      .append($('<span>').addClass('buttonicon buttonicon-comment-medical'));
+  // mousedown.preventDefault keeps the editor selection intact (same trick the
+  // toolbar button uses), so displayNewCommentForm still sees the selection.
+  $btn.on('mousedown', (e) => e.preventDefault());
+  $btn.on('click', (e) => {
+    e.preventDefault();
+    self.hideFloatingAddCommentButton();
+    self.displayNewCommentForm();
+  });
+  // ARIA button semantics: a non-native button must be activatable by keyboard
+  // (Enter / Space), not just click (#95).
+  $btn.on('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+      e.preventDefault();
+      $btn.trigger('click');
+    }
+  });
+  $btn.appendTo($('#editorcontainerbox'));
+  this.$floatingAddComment = $btn;
+  return $btn;
+};
+
+EpComments.prototype.hideFloatingAddCommentButton = function () {
+  if (this.$floatingAddComment) this.$floatingAddComment.removeClass('visible');
+};
+
+EpComments.prototype.updateFloatingAddCommentButton = function (rep) {
+  if (clientVars.floatingCommentButton === false) return;
+  if (!rep || !rep.selStart || !rep.selEnd) return;
+  const hasSelection =
+    rep.selStart[0] !== rep.selEnd[0] || rep.selStart[1] !== rep.selEnd[1];
+  if (!hasSelection) return this.hideFloatingAddCommentButton();
+  // On read-only pads commenting isn't possible, so don't offer the button.
+  if (clientVars.readonly) return this.hideFloatingAddCommentButton();
+  // Don't compete with the new-comment form once it's open over the selection.
+  if ($('#newComment').hasClass('popup-show')) return this.hideFloatingAddCommentButton();
+
+  const position = getXYOffsetOfRep(rep); // [left, top] in #editorcontainerbox space
+  if (!position) return this.hideFloatingAddCommentButton();
+
+  const $btn = this.ensureFloatingAddCommentButton();
+  const container = $('#editorcontainerbox');
+  const containerWidth = container.width() || 0;
+  const btnWidth = $btn.outerWidth(true) || 28;
+  // Reuse the on-screen clamp idea from #192 so the button never spills off the
+  // edge on a narrow / mobile viewport.
+  const margin = 6;
+  let left = position[0] + 4;
+  left = Math.min(Math.max(left, margin), Math.max(margin, containerWidth - btnWidth - margin));
+  const top = Math.max(margin, position[1] + 2);
+  $btn.css({left: `${left}px`, top: `${top}px`}).addClass('visible');
+}
+
 // #12: a togglable panel listing every comment in the pad, with click-to-jump.
 // Distinct from the Y-aligned sidebar — this is a flat, scrollable index.
 EpComments.prototype.ensureCommentsOverview = function () {
@@ -1165,6 +1237,7 @@ EpComments.prototype.navigateComment = function ($el, dir) {
 };
 
 EpComments.prototype.displayNewCommentForm = function () {
+  this.hideFloatingAddCommentButton();
   const rep = {};
   const ace = this.ace;
 
@@ -1575,6 +1648,13 @@ const hooks = {
 
     if (['setup', 'setBaseText', 'importText'].includes(eventType)) return;
 
+    // Show/position the floating "add comment" button next to the current
+    // selection (#95). aceEditEvent fires on selection changes, so this keeps
+    // the button anchored to the text and hidden when nothing is selected.
+    if (pad.plugins.ep_comments_page) {
+      pad.plugins.ep_comments_page.updateFloatingAddCommentButton(context.rep);
+    }
+
     if (context.callstack.docTextChanged && pad.plugins.ep_comments_page) {
       pad.plugins.ep_comments_page.setYofComments();
     }

static/tests/frontend-new/specs/floatingCommentButton.spec.ts

@@ -0,0 +1,39 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody} from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {aNewCommentsPad} from '../helper/comments';
+
+// #95: a floating "add comment" button appears next to the selection and opens
+// the new-comment form, so users don't have to reach for the toolbar. It is
+// anchored to the text (not the sidebar) so it also works on narrow viewports.
+test.describe('ep_comments_page - Floating add-comment button (#95)', () => {
+  test('appears on selection, opens the form, and stays on-screen', async ({page}) => {
+    test.setTimeout(60_000);
+    await aNewCommentsPad(page);
+    const inner = await getPadBody(page);
+    const visibleFab = page.locator('.floating-add-comment.visible');
+
+    // No selection yet → button not visible.
+    await inner.click();
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type('please comment on this text');
+    await expect.poll(async () => visibleFab.count()).toBe(0);
+
+    // Select the text → button becomes visible and within the viewport.
+    await page.keyboard.press('Control+A');
+    await expect.poll(async () => visibleFab.count()).toBeGreaterThan(0);
+
+    const box = await visibleFab.boundingBox();
+    const vp = page.viewportSize();
+    expect(box).not.toBeNull();
+    if (box && vp) {
+      expect(box.x).toBeGreaterThanOrEqual(-2);
+      expect(box.x + box.width).toBeLessThanOrEqual(vp.width + 2);
+    }
+
+    // Clicking it opens the new-comment form and hides the button.
+    await visibleFab.click();
+    await expect(page.locator('#newComment.popup-show')).toBeVisible();
+    await expect.poll(async () => visibleFab.count()).toBe(0);
+  });
+});